Question

移动设备的垂直方向存在视口问题。正如您所看到的，在页脚下方，有一个填充屏幕的空白区域。如果我在水平方向上转动方向，则视口工作正常，对于平板电脑也是如此，桌面等。这个问题只存在于移动设备的垂直方向。有什么方法可以解决这个问题吗？

我已经有了这个元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Answer 1

我不确定＆＃34;标记有所作为，但你可以随时尝试。

<meta name=viewport content="width=device-width, initial-scale=1">

https://developers.google.com/speed/docs/insights/ConfigureViewport

修改1 ：尝试使用媒体查询，如果这样可以解决问题https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 2

移动浏览器处理方向更改略有不同。例如，Mobile Safari通常只是在从纵向更改为横向时缩放页面，而不是像最初在横向加载时那样布置页面。如果Web开发人员希望在iPhone上切换方向时其缩放设置保持一致，则必须添加最大比例值以防止此缩放，这有时会产生不必要的副作用，即阻止用户进行缩放在：

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

<强> More Info

我希望它有所帮助。

Answer 3

您需要使用媒体查询：

首先在CSS中使用移动（基础）样式（通常是单列布局）。
然后在逐渐增大的视口断点处使用最小宽度的媒体查询（这是您应用网格样式的位置）。
使用每个较大的最小宽度断点来覆盖前一个样式，以根据视口大小提供适当的布局。
请务必使用html中的<meta name="viewport" />标记，以确保最佳的移动演示。

使用级联最小宽度媒体查询可以让您根据屏幕宽度准确了解正在应用的属性，并使您的css更容易排除故障。

编辑 - 添加了媒体查询参考链接：

移动优先示例 - 小屏幕上的单列和更大的两列，在更大的屏幕上更改边框颜色

div {box-sizing:border-box; width:100%;border:solid 1px red;}

@media only screen and (min-width:37.5em) {
   .half {
       float: left;
       margin: 0;
       width: 50%;
   }
   .row:after {
     content:"";
     display:table;
     clear:both;
   }
}

@media only screen and (min-width:50em) {
   div {border:solid 1px green;}
}

<div class="container">
    <div class="row">
        <div class="half">Stuff 1</div>
        <div class="half">Stuff 2</div>
    </div>
    <div class="row">
        <div class="half">Stuff 3</div>
        <div class="half">Stuff 4</div>
    </div>
</div>

Answer 4

您是否尝试过最大规模？

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

正常方向移动设备上的视口问题

4 个答案: