我有以下HTML
<!DOCTYPE html>
<html lang="en">
<body style="
box-sizing: border-box;
max-width: 100vw;
">
<main style="width: 60%; margin: 0 auto;">
<h1>Title</h1>
<img style="width: 100%; height: auto;"
src="https://images.unsplash.com/photo-1513622790541-eaa84d356909?q=40&w=1974&auto=format&fit=crop"
width="1974" height="1481" alt="">
</main>
<span>Something else</span>
</body>
</html>字符串
body的宽度被锁定为100视口单位- 我有一个内部块，应该是60%的宽度的父的宽度
- 里面是一个图像，我想占用它的父宽度的100%（与自动高度保留纵横比）
这在桌面上工作
的数据
但在iOS上就没有同样的行为了。图像溢出页面并添加了一个滚动条？
的
为什么它不尊重宽度？我怎么让它工作？
2条答案
按热度按时间6psbrbz91#
只需将
max-width: 100vw设置为图像本身。似乎在Safari的最新版本中已修复7vhp5slm2#
你有参与其中吗？https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
如果你没有明确告诉浏览器将你的网页视为响应式布局，它会缩小以适应内容/空间。这可能是问题的根源。
(you也应该设置你的img元素为display：block）