Question

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

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

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

这可能是什么原因导致无效？

澄清

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

Answer 1

为内部容器指定固定宽度

div#branding{
 width: 1024px;
}

#content{
 width: 1024px;
}

div#footer{
 width: 1024px;
}

为@media屏幕

将所有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 2

我使用宽度：100％并且它解决了我的方向布局情况，但似乎媒体查询也可以提供帮助：

＆＃13;

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

＆＃13;

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

让我们知道它是否成功。

Answer 3

根据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
}

编辑：因此，请确保您放置了＃34;容器＆＃34;在各种模式下div为100％并调整所有其他元素。你得到的滚动条实际上是DOM元素，具有固定的div或边距以及影响整页宽度的填充

Answer 4

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

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

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

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

我将内容的宽度更改为960px（我不知道实际的阈值，但我的其他网站可以很好地扩展这个宽度）并立即解决了问题。

添加此答案，以防有人正在寻找缩放功能无法在其网站上运行的原因。

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

Answer 6

我注意到Safari默认会自动缩放网页。但是，如果用户手动应用某些缩放 - Safari会停止其自动缩放。在我的情况下，这就是它缩放某些网站而其他网站没有缩放的原因。

Meta视口不在iPad上缩放网站

6 个答案: