flex 框中的圖像顯示移動設備 chrome 和桌面 chrome+設備模式之間的不同尺寸

Question

密碼筆

 body { background: yellow; border: 2px solid blue; height: 150px; }.flex { border: 2px solid red; display: flex; }

 <div class="flex"> <img src="https://www.w3.org/Icons/SVG/svg-logo.svg"> </div>

我已經構建了一個僅包含一個 flex-item 的彈性框，它是一個圖像元素。 使用桌面 Chrome 和桌面 Chrome 設備模式（設備：ipad）時，圖像元素大小為 150px x 150px。 截屏

但是，當我在我的 Ipad 上查看網站時，圖像尺寸更大，而不是 150px x 150px。 ipad截圖

ps：我給body設置了150px的高度和一個邊框，以便更好地可視化圖像高度

我的問題是：

1. 這個問題是怎么發生的？
2. 為什么我在桌面 Chrome 設備模式下看不到這個問題？ 這是否意味着我不能依靠 Chrome 設備模式來檢查我的網站的移動兼容性？

Answer 1

如果您明確設置 svg 的大小，您應該很好

例如， https://codepen.io/panchroma/pen/JjGpyzR

HTML

<div class="flex">
   <img class="icon" src="https://www.w3.org/Icons/SVG/svg-logo.svg"> 
</div> 

CSS

img.icon{
  height:150px;
}

為什么我在桌面 Chrome 設備模式下看不到這個問題？ 這是否意味着我不能依靠 Chrome 設備模式來檢查我的網站的移動兼容性？

預覽通常很好，但也有例外。 預覽可能不准確的另一種情況是您忘記包含視口元標記

SVG 的大小和行為也與您對 JPEG / PNG 圖像的預期有所不同，這里有一個可能有用的鏈接https://css-tricks.com/scale-svg/

祝你好運！

Answer 2

body > div.flex > img 是你的 DOM 樹。

高度：身體：150px - css div.flex:? - 高度未設置 img:? - svg 是可縮放矢量圖形，因此也沒有設置高度。

最終如何設置高度取決於標准、版本、供應商等：在某些版本中，維度來自 dom 樹上的任何祖先，而其他版本則來自直接父級，只有回退到視口。

我的建議：只需設置 img 元素高度，rest 將自下而上跟隨。