1

我正在使用 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%。

我在这里想念/不明白什么？

4

1 回答 1

0

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

于 2012-05-01T09:58:47.753 回答