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

Question

mobile.As 的垂直方向存在视口问题，您可以看到，在页脚下方，有一个白色 space 填充 screen.If 我打开方向水平，视口工作正常，同样适用于平板电脑、桌面等。这个问题只在 mobile.Is 的垂直方向上存在，有什么办法可以解决这个问题吗？

我已经有了这个元标记：

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

Answer 1

我不确定 " 标记是否有所作为，但您可以随时尝试。

<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 browsers handle orientation changes slightly differently. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:

<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">

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

Viewport issue on normal orientation mobile

css

mobile

android

orientation