我正在使用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进行混合应用的响应式设计?
您必须在Ionic中使用离子响应网格进行响应设计:https://ionicframework.com/docs/layout/grid
默认情况下,网格将占用100%的宽度。要基于屏幕尺寸设置特定宽度,请添加固定属性。每个断点的网格宽度在--ion-grid-width- {breakpoint}
中定义
在mydevice.io中,您可以看到screen.width和screen.height。 您不得使用该属性来计算可用的视口分辨率,因为它将始终返回整个屏幕分辨率(实际上是360px x 640px),而不是视口分辨率(通常会降低高度,有时会降低宽度)移动设备,具体取决于显示模式,是否显示状态栏以及是否显示按钮栏)。
代替 screen.width和screen.height 使用为您的应用提供实际可用视口的几种选择之一:例如window.innerWidth和window.innerHeight 。
您可能在window.innerHeight中得到的像素少于640像素。
关于来自CSS的媒体查询,它将使用视口分辨率,但是您指定了max-height:640px,并且由于您的视口高度小于640px,因此即使高度小于640mm,规则也会匹配,即使您希望其他东西。
因此,只要您的实际身高小于640像素,就必须添加其他/更多高度更低的css规则,或者可以使用另一种方法(底部锚定或更复杂的场景JS,基于innerHeight / innerTop帮助动态响应属性)。
PS有点偏离主题,但非常重要:总是,如果您自己使用css响应,请尝试仔细检查是否存在一个至少具有width = device-width的元视口,否则移动html渲染器可能会做奇怪的事情。
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
PS2,我想您要使用自己的样式表,否则可能已经有大量的离子材料。