当我更改为横向时，移动页面会自动缩放所有内容答案

【问题标题】：Mobile page automatically scaling everything when I change to landscape当我更改为横向时，移动页面会自动缩放所有内容
【发布时间】：2012-05-01 17:58:47
【问题描述】：

我正在使用 jquerymobile 的框架围绕移动网站展开思考。到目前为止，我有一个基本的小页面，它在纵向模式下看起来正确 - 然后我翻转到横向，所有内容都会按比例缩放。

我正在尝试使用 css 的 @media 实现在头部设置这个元标记来控制它的外观：

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

例如，将下面的 img 包裹在一个 div 中：

<div id="main-banner"><img src="mybanner.png" /></div>

并且我有以下 CSS，以便图像应调整为父 DIV 宽度是什么：

img {
max-width: 100%;
height: auto;
}

声明取决于旧 iPhone 的屏幕尺寸：

<!-- iPhone 2G, 3G, 3GS Portrait -->
@media only screen and (device-width: 320px) 
and (orientation: portrait) and not (-webkit-min-device-pixel-ratio: 2) {
    #main-banner {
        width: 300px;
    }
}

<!-- iPhone 2G, 3G, 3GS Landscape -->
@media only screen and (device-width: 480px) 
and (orientation: landscape) and not (-webkit-min-device-pixel-ratio: 2) {
     #main-banner {
        width: 460px;
    }
}

注意：将宽度从 460 更改为更小的宽度绝对没有效果 - 可以肯定地说，横向 CSS 根本没有启动。

我已经从一个站点复制了这段代码作为可以使用的东西，它似乎对其他人也有效 - 但是就像我在我的文章中所说的那样，一切都会按比例放大 - 甚至图像......（我知道有一些缩放比例文本会发生这种情况，这应该是正常的，但我猜图像在横向模式下的宽度最终会比 460px 大 20%。

我在这里遗漏了什么/不明白什么？

【问题讨论】：

您确定这与设计的不完全一样吗？与其他一些网站进行比较。至少，当旋转到横向时，我已经习惯了变得太大的东西。
你知道是否可以关闭所有缩放吗？我不希望通过电话为我做任何友好的事情。
是的，我知道你的意思，但我认为这种行为已经深深地融入了浏览器。您可能还希望避免让您的网站与其他所有网站的处理方式不同。
其实我的错。有一个 safari 错误 webdesignerwall.com/tutorials/…（我还没有更新我的头文件以包含最大比例！）
很好的例子，很好的发现。

标签： css responsive-design

【解决方案1】：

更新了头文件以包含最大比例！

【讨论】：