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根本没有启动。

我已经从网站上复制了这个代码作为可以工作的东西，它似乎适用于其他人 - 但就像我说的那样，一切都在扩展 - 甚至是图像......（我知道有一些缩放这种情况发生在文本中并且据说是正常的，但我猜测在横向模式下图像的宽度比460px大约大20％。

我在这里缺少什么/不明白？

Answer 1

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

移动页面会在我更改为横向时自动缩放所有内容

1 个答案: