在普通方向移动设备上的视口问题

Question

在普通方向移动设备上的视口问题

6

在移动端垂直方向上存在视口问题。如您所见，在页脚下方有一个填充整个屏幕的白色空间。如果我将方向切换为水平方向，则视口正常工作，平板电脑、桌面等同样如此。这个问题只在移动端垂直方向上存在。有没有办法解决这个问题？

我已经拥有了这个元标记：

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

- Petru Lebada

如果您将 height=device-height, 添加到您的内容属性中会发生什么？ - Alp

2

这不仅仅是因为页面没有屏幕高吗？ - Mr Lister

@MrLister，我已经说明了，在其他设备上都可以正常工作，甚至在移动设备上也是如此，问题只出现在垂直方向上。 - Petru Lebada

@Alp，我试过了，但没有任何区别，尽管它搞乱了我的视口宽度。 - Petru Lebada

5

请提供一个JSFiddle（或将您的代码放在其他地方在线上），这样我们就可以测试它了。如果不能在我们自己的设备上看到代码并运行它，很难确定出现了什么问题。 - John Slegers

显示剩余4条评论

4个回答

3

我不确定引号是否有影响，但你可以尝试一下。

<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

- Rick Doesburg

页面上的一些元素，比如容器/封装器等，它们是否有固定的宽度？也可能是因为在较小的屏幕尺寸上您的媒体查询不正确？ - Rick Doesburg

页面顶部的白色导航栏是固定的，我还没有使用媒体查询，直到现在我只是使用vh和vw来设置每个元素的大小，除了这个问题，它运行良好。 - Petru Lebada

@PetruLebada，您能否提供一个fiddle，以便我们有东西可以使用？ - Rick Doesburg

3

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

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

更多信息

希望对您有所帮助。

- Ferrmolina

1

你尝试过最大缩放吗？

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

- Stanley Ko

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- IMI · Accepted Answer

您需要使用媒体查询：

在CSS中首先使用移动端（基本）样式（通常是单列布局）。
然后使用min-width的媒体查询，逐步增加视口断点（这是应用网格样式的地方）。
使用每个更大的min-width断点来覆盖以前的样式，从而根据视口大小提供适当的布局。
确保在html中使用<meta name="viewport" />标签，以确保最佳的移动端呈现效果。

使用级联的min-width媒体查询将允许您准确了解基于屏幕宽度应用了哪些属性，并使您的css故障排除更容易。

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

Mobile First Example - Single column on small screens and two columns larger with a border color change on even larger screens

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>