視口尺寸無法正常工作

我必須錯過某些明顯的東西，但是它的出現......我只是想在瀏覽器上建立一個狹窄的視口寬度（320px）來檢查/設計手機顯示器的網頁佈局。爲什麼如果使用元標記設置視口寬度，瀏覽器不尊重它？這是我做的：視口尺寸無法正常工作

<!DOCTYPE html> 
<html> 

<head> 
<meta name="viewport" content="width=320px" /> 
<style> 

.content { 
    width: 100vw; 
    background-color: yellow; 
} 

</style> 
</head> 

<body> 
<div class="content"> 
    <p> Hello, this is the 'content' </p> 
</div> 
</body> 

</html>

它只是沒有關係，我放在標籤的大小，它似乎只是使用本機顯示大小。任何人都可以告訴我問題是什麼以及如何真正做到這一點？

來源

2017-11-18 Godis

必須使用CSS媒體查詢與視標籤的瀏覽器認識到什麼對瀏覽器調整大小做。它最初不會在瀏覽器加載時加載移動視圖。它只響應如果瀏覽器收縮 –

@戈迪斯你應該爲此挑戰性地使用媒體查詢或瀏覽器響應模式。如果不是的話，去學習一些編碼原則。 –

您不需要設置視口來檢查移動兼容性。只需在您的瀏覽器中點擊F + 12鍵chrome，然後點擊移動設備圖標即可。這樣您可以選擇任何視口配置文件並檢查您的設計。見下圖：

來源

2017-11-18 12:29:24

非常感謝，巴勃羅，我不知道這個！ – Godis

視口尺寸無法正常工作

回答

相關問題