我正在尝试为iphone设置移动网页,但无法显示正确的宽度.
问题是..在我页面的大多数帖子中,他们都有宽度约为480px到500px的图片,所以如果我按如下方式设置meta:
1 =这将显示帖子中的所有部分图片,但页面屏幕大于iphone屏幕 ..
name ="viewport"content ="width = 480px; initial-scale = 1; maximum-scale = 1; user-scalable = 1;"
2 =这将显示内部iphone屏幕正确的页面.. 但图像的右侧部分将在立场模式下隐藏到屏幕宽度之外.
name ="viewport"content ="width = device-width; initial-scale = 1; maximum-scale = 1; user-scalable = 1;"
请帮助设置在iPhone和网页中显示完整图像缩放正确的屏幕宽度.
测试使用iphone:http://www.xaluan.com/modules.php？name = News&file = article_mobi&sid = 242186
您可能想尝试这样的事情:
让我们说你的HTML看起来像这样:
<body>
<div id="wrapper">
<img src="small-image.jpg" />
</div>
</body>
你可以用你的CSS做到这一点:
/* you can modify this as you see fit */
@media screen and (max-width: 480px) {
div#wrapper {
max-width: 100%;
overflow:hidden;
}
img {
max-width: 100%;
}
}
注意:这只适用于在包装元素上设置宽度,就像我们在那里做的那样.最大宽度也很好.如果你不这样做,元素可能会延伸到图像.
这将确保大图像永远不会比包裹它的元素大,但不会修改较小的图像.
| 归档时间： |
|
| 查看次数： |
32581 次 |
| 最近记录： |