元视口不能在 iPad 上缩放网站

Question

我有一个（相当简单的）网站，我希望自动缩放和调整，以便主要内容区域适合屏幕，而无需在 iPad 上进行水平滚动。在横向模式下它可以正常工作，但是在纵向模式下它会在侧面留下一部分，并且用户必须水平滚动。 它通常适用于我所做的其他网站，但对于这个我无法理解是什么阻止了 Safari 这样做。

我在 HTML 的顶部添加了以下行，但它似乎没有任何效果（我尝试了各种替代方法，例如添加 initial-scale=1.0 等）

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

这不起作用的原因可能是什么？

澄清

我不是在寻找媒体查询解决方案。我只是想了解为什么对于某些网站，iPad（和其他触摸设备）会自动缩小网站以适应屏幕，而在这种情况下，某些原因会导致它无法显示。我只是想找出它的原因。

Answer 1

我注意到的是，Safari 默认会自动缩放网页。但是，如果用户手动应用一些缩放 - Safari 将停止其自动缩放。 就我而言，这就是它扩展了某些站点而其他站点没有扩展的原因。

Answer 2

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

但是，当网站太宽时，这种缩放似乎不起作用。我的内容是 1024 像素宽，由于某种原因导致设备关闭缩放。

我将内容的宽度更改为 960 像素（我不知道实际的阈值，但我的其他扩展良好的网站具有此宽度）并且问题立即得到解决。

添加此答案以防有人正在寻找扩展无法在他的网站上运行的原因。

显然这与拥有响应式网站无关，这只是网站简单且可扩展就足够了。

Answer 3

我认为元标记除了最大值之外还有一个最小值：

<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 */
}

Answer 4

内部容器有固定宽度

div#branding{
 width: 1024px;
}

#content{
 width: 1024px;
}

div#footer{
 width: 1024px;
}

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

有关@media 屏幕的更多信息可以找到here

@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; */
    }
}

它会起作用的

随着左侧内容更多，右侧页脚内容将下降

screenshot

注意：你的页脚会因为固定高度被破坏，你可以删除它

用于修复页脚更改页脚的 css

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

screenshot

Answer 5

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

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

很大的不同是这个，它将应用于所有 1024px 的屏幕

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

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

Answer 6

我使用了 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/

让我们知道它是否有效。