视口尺寸无法正常工作

我必须错过某些明显的东西，但是它的出现......我只是想在浏览器上建立一个狭窄的视口宽度（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

视口尺寸无法正常工作

回答

相关问题