Meta viewport 在 iPad 上无法缩放网站

Question

我有一个（相当简单的）网站，希望自动缩放和调整，使主要内容区域适合iPad屏幕，无需水平滚动。在横向模式下它工作正常，但在纵向模式下会留下一部分在侧面，用户必须进行水平滚动。

其他网站通常都能正常工作，但对于这个网站，我不知道什么阻止了Safari的实现。

我在HTML文件的顶部添加了以下代码行，但似乎没有任何效果（我也尝试过添加initial-scale=1.0等各种替代方案）。

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

什么原因导致这个不起作用？

澄清：我不是在寻找媒体查询解决方案。我只是试图理解为什么对于某些站点，iPad（和其他触摸设备）会自动缩小网站以适应屏幕，而在这种情况下，有些东西导致它不能这样做。我只是试图找出原因。

- jbx

Answer 1

内部容器有固定宽度

div#branding{
 width: 1024px;
}

#content{
 width: 1024px;
}

div#footer{
 width: 1024px;
}

将所有 @media screen 中的 3 个 width 更改为 100%

有关 @media 屏幕的更多信息，请参见此处

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {
    div#branding {
        width: 100%;
    }
    #content {
        width: 100%;
    }
    div#footer {
        height: 40px; /* remove height */
        display: inline-block; /* change display:block to display: inline-block; */
    }
}

它将起作用

当左侧内容更多时，右侧页脚内容会下移

截屏

注：由于有固定高度，您的页脚可能会破裂，您可以将其删除

要修复页脚，请更改页脚的CSS

div#footer {
 height: 40px; /* remove height */
 display: inline-block; /* change display:block to display: inline-block; */
}

屏幕截图

- Vitorino fernandes

---

如果我在＃branding，＃content和＃footer上执行width：100％，它们将不再在普通桌面屏幕上居中，这是我不想要的。然而，我试图理解的是什么使iPad在某些情况下缩放网站，以及什么使它在其他情况下不缩放。例如，在这种情况下，我使用完全相同的布局（居中标题，全部简单）制作的另一个网站，iPad可以很好地调整大小：http://www.bounce-life-coaching.com - jbx

忘记加上@media screens了。 - Vitorino fernandes

这个答案实际上是最接近真正问题的，因为由于某种愚蠢的原因，1024像素的宽度导致页面无法缩放，而使用较低宽度（我使用了960像素）时，缩放又开始正常工作了。你的解决方案也有效，或者说通过使用媒体查询来避免了这个问题。（虽然底部页脚需要进行调整） - jbx

Answer 2

根据您在 CSS 中设置的规则，您需要指定纵向或横向模式，并添加所需的宽度。

@media screen and (orientation:landscape) and (max-width:1024px){
    some rules that will be applied to iPad in landscape mode
}

最大的区别在于，这将应用于所有1024像素屏幕

@media screen and (max-width: 1024px){
    some css rules for "normal" screens on max-width: 1024px
}

编辑：所以请确保将你的“容器”div在各种模式下设置为100％并调整所有其他元素。你得到的滚动条实际上是带有固定div或边距和填充的DOM元素，这些会影响整个页面的宽度

- Zlatko Vujicic

Answer 3

我使用了width:100%，解决了我的方向布局问题，但似乎还有媒体查询可以帮助:

@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

请查看此网站以获取更多信息：http://www.1stwebdesigner.com/css/how-to-use-css3-orientation-media-queries/

如果有效，请告诉我们。

- Zapp

---

你在哪个元素上加了 width: 100%？我已经在我的 body 标签上加过了。 - jbx

我正在使用 normalize（https://necolas.github.io/normalize.css/），并且对于需要占满浏览器宽度的所有内容，我都使用 width:100%。%s 对于我测试的所有设备都非常有效。@media 查询是否有帮助？ - Zapp

Answer 4

我认为meta标签除了最大缩放比例外还有最小缩放比例：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

我不知道现在这样做是否有任何区别。

理论上它应该可以工作，还有：

@media only screen and (min-width: 480px) {
    /* landscape */
}

@media only screen and (max-width: 479px) {
    /* portrait */
}

- Verhaeren

Answer 5

我终于找到了问题所在。iPad（以及大多数触摸设备）实际上会自动缩放网站，而不需要使用<meta name="viewport" ... >，如果网站没有明确设计为响应式。

然而，当网站太宽时，这种缩放似乎不起作用。我的内容宽度为1024像素，由于某种原因，这触发了设备关闭缩放。

我将内容的宽度更改为960像素（我不知道实际阈值，但我的其他网站可以很好地缩放），问题立即得到解决。

如果有人正在寻找为什么缩放在他的网站上不起作用的原因，可以参考这个答案。

显然，这与拥有响应式网站无关，这只是当网站简单且缩放足够时。

- jbx

Answer 6

我注意到的是，Safari默认会自动缩放网页。但是，如果用户手动应用了一些缩放操作，Safari就会停止自动缩放。在我的情况下，这就是为什么它会对某些网站进行缩放而对其他网站不进行缩放的原因。

- LachoTomov