為何iPhone不相容max-width: 100%？
P粉806834059
2023-09-02 17:24:50
<p>在我的網頁瀏覽器中，如果壓縮並且在我的Android手機上，100%的工作完美。但在iPhone上不是這樣。 </p>
<p>對於圖片，我通常使用max-width: 100%;，如果情況適合，使用width: 100%;或img-responsive。圖片寬度大於600px，因此我將寬度設為600px以在較大的裝置上控制。 </p>
<pre class="brush:php;toolbar:false;"><section class='section20'>
<figure class="image">
<img src="images/user-content/1/20221003160546.jpg">
</figure>
</section></pre>
<p>CSS：</p>
<pre class="brush:php;toolbar:false;">.section20 .image,
.section20 img {
width: 600px !important;
max-width: 100% !important;
}</pre>
<p>加!important或不加都沒有差別。格式化編輯器是CKEditor 5。它在處理程式碼中的類別時非常嚴格。如果在程式碼視圖中新增自訂類，當返回格式化編輯器視圖時，它將從figure中刪除它。 </p>
<pre class="brush:php;toolbar:false;"><figure class="image">
<figure class="image my-custom-class"></pre>
<p>custom-class會被刪除。 </p>
不要硬編碼寬度和高度。使用rem或vw/vh（建議）。
.section20 .image, .section20 img { width: 35rem ; // 或者输入相应的rem值 max-width: 100vh ; }表示此元素的高度等於視口高度的100%。
檢查你的選擇器。
使用
.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>