Ionic 4 如何使用媒体查询做响应式应用程序？

Question

我正在使用 Ionic 4 创建混合应用程序。

我使用 css 媒体查询根据需要移动设备的屏幕尺寸进行特定布局。示例：

这是我的应用程序在浏览器中 360x640 屏幕大小像素视口中的样子：

但是，这在我的手机中看起来是这样的，它具有相同的屏幕尺寸 (360x640)（以像素为单位）：

屏幕上的所有蓝色部分都被切掉了。

这里是 css:

@media screen and (max-height: 640px) {


.ultraipunt{   
    font-size:19px;
}

.tittle{
  font-size: 23px;
}

.tittle3{
  font-size: 19px;
}

.buttonclass{
    font-size:19px;
    height:60px;
}

.buttonfacebook{
    font-size:19px;
    height:60px;
}

.buttongoogle{
    font-size:19px;
    height:60px;
}

.fond1{
   min-height: 154px;
}

.fond2{
   padding-top:0.5em;
  padding-bottom:0.5em;
  margin-top:0px;
}
.textwhite {
    font-size:18px;
}
.textwhitebold {
    font-size:18px;
}

form{
    margin-bottom:0em;
    margin-top:0em;
}

.imgen1{
 width:65px;
}


}

使用网站：https://www.mydevice.io/，这是我的手机规格：

现在我的问题是：

为什么 css 尺寸不能很好地转换到我的手机视口？如何使用 ionic 4 为混合应用程序进行响应式设计？

Answer 1

您必须在 Ionic 中使用 ionic 响应式网格进行响应式设计：https://ionicframework.com/docs/layout/grid

By default, the grid will take up 100% width. To set a specific width based on the screen size, add the fixed attribute. The width of the grid for each breakpoint is defined in the --ion-grid-width-{breakpoint}

Answer 2

在你的mydevice.io截图中可以看到screen.width和screen.height。 您不得使用该属性来计算可用的视口分辨率，因为它总是return整个屏幕分辨率（实际上是 360px x 640px）而不是您的视口分辨率（它将对于移动设备，通常高度较小，有时宽度较小，具体取决于显示模式，以及是否显示状态栏和是否显示按钮栏）。

而不是 screen.width 和 screen.height 使用几个替代方案之一，这将为您提供真正的您的应用的可用视口：例如 window.innerWidth 和 window.innerHeight.

您可能会在 window.innerHeight 中获得小于 640 像素的像素。

关于来自 css 的媒体查询，它将使用视口分辨率，但您指定了 max-height:640px，并且因为您的视口高度小于 640px，所以规则匹配，即使高度是更少，即使你想要其他东西。

因此，只要你的实际高度小于 640px，你就必须添加 other/more css 更小高度的规则，或者使用其他方法（底部锚定或更复杂的场景 JS用于基于 innerHeight/innerTop 属性的援助动态响应能力）。

PS 有点偏离主题但非常重要：总是，如果您自己使用 css-responsive，请尝试仔细检查是否有至少 width= 的元视口设备宽度，否则移动 html 渲染器可能会做奇怪的事情。

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

PS2 我假设您想使用自己的样式表，否则可能已经为 ionic 制作了大量 material。

Ionic 4 如何使用媒体查询做响应式应用程序？

Ionic 4 how to do a responsive app using media queries?

css

hybrid-mobile-app

responsive

ionic4