当前位置：文江博客话题详情

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

发布于 2024-10-16 08:03:18 字数 710 浏览 2 评论 0原文

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

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

1 = 这将显示帖子中图片的所有部分但页面屏幕大于iPhone屏幕..

名称=“视口” 内容=“宽度= 480px;初始比例= 1; 最大规模=1；用户可扩展=1;”

2 = 这将在 iPhone 屏幕内部显示正确的页面.. 但图像的右侧部分将在站立模式下隐藏到屏幕宽度之外。

名称=“视口” 内容=“宽度=设备宽度；初始规模=1；最大规模=1；用户可扩展=1;”

请帮助设置在 iPhone 中显示完整图像，并且网页缩放正确的屏幕宽度。

测试使用 iPhone 的位置： http://www.xaluan.com/modules.php?name=News&file=article_mobi&sid=242186

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迷荒 2024-10-23 08:03:18

你可能想尝试这样的事情：

假设你的 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 也适合这一点。如果不这样做，元素可能会随着图像一起拉伸。

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

You might want to try something like this:

lets say your html looks like this:

<body>
  <div id="wrapper">
    <img src="small-image.jpg" />
  </div>
</body>

you can do this with your 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%;
  }

}

Note: This will only work if you set a width on your wrapping element, like we're doing there. max-width is also fine for that. If you don't the element probably will stretch out with the image.

This will ensure that big images never become bigger than the element that wraps it, but smaller images will not be modified.

回复收藏 0 原文

~没有更多了~