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

Question

我正在使用 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 根本没有启动。

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

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

Answer 1

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