为什么iphone不支持最大宽度:100%

Question

在我的网络浏览器中，如果受到挤压，我的Android手机100%工作正常。检查过的iPhone就不是这样了。

对于图像，我通常使用最大宽度：100%；当情况适合宽度时：100%；或img响应。图像宽度大于600像素；因此，我将宽度设置为600px以控制较大设备上的宽度。

<section class='section20'>
<figure class="image">
<img src="images/user-content/1/20221003160546.jpg">
</figure>
</section>

CSS：

.section20 .image,
.section20 img {
width: 600px !important;
max-width: 100% !important;
}

正在添加！重要与否没有区别。格式化编辑器是CKEditor 5。它在代码中处理类的方式相当严格。如果您在代码视图中添加自定义类，当返回到格式化编辑器视图时，它会将其从图中删除。

<figure class="image">
<figure class="image my-custom-class">

自定义类将被删除。

Answer 1

检查选择器。

使用.section20 .image是指示img包装器保持在600px并且不会使用max-width: 100%;来调整大小。

请改用.image img。

.image img {
width: 600px;
max-width: 100%;
}

<section class='section20'>
<figure class="image">
<img src="https://dummyimage.com/600x400/000/fff">
</figure>
</section>

Answer 2

不要硬编码宽度和高度。转到rem或vw/vh(推荐(。

.section20 .image,
.section20 img {
width: 35rem ; // or type the equivalent rem value
max-width: 100vh ; 
}

表示此元素的高度等于视口高度的100%。