gpt4 book ai didi

iphone - 如何在 iPhone 上设置移动网页的正确宽度

转载 作者:行者123 更新时间:2023-12-03 19:40:05 28 4
gpt4 key购买 nike

我正在尝试为 iPhone 设置移动网页,但无法显示正确的宽度。

问题是..在我的页面的大多数帖子中,它们的图片宽度约为 480 像素到 500 像素因此,如果我按如下方式设置:

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%;
}

}

注意:只有当您在包装元素上设置宽度时,这才有效,就像我们在那里所做的那样。 max-width 也适合这一点。如果不这样做,元素可能会随着图像一起拉伸(stretch)。

这将确保大图像永远不会变得比包裹它的元素更大,但较小的图像不会被修改。

关于iphone - 如何在 iPhone 上设置移动网页的正确宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4893885/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com