Question

有人可以解释一下为什么设置height视口属性：

<meta name="viewport" content="width=480px, height=120px">

不起作用？ window.innerWidth报告480px但是window.innerHeight 210，而不仅仅是120px！那么设置height属性的重点是什么？

Answer 1

好吧，因为没有高度，这应该用于设备支持而不是用于定义特定大小的媒体查询。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
http://www.w3schools.com/css/css_rwd_viewport.asp

Answer 2

与上面提到的评论一样，您可以添加宽度/高度而不 px - 示例如下

<meta name="viewport" content="width=500, initial-scale=1">

但请注意，根据最终用户设备，像素不是像素

快速阅读本文：

关于像素的ref也不是像素

编辑：好的 - 也许我现在遇到了你的问题。在玩我注意到的视口道具时，可能是你的浏览器缓存在你测试时玩了很多伎俩。 -ofc不确定你是否在测试时没有清除它。 - !!!如果您在非移动设备上进行测试，请阅读END处的注意事项!!!

但是为了给你一个快速的例子，说明改变了一些事情：

<meta name="viewport" content="height=50">

您应该查看我为您设置的3个网站：

所有以下div：

div{
    width: 60px;
    height: 60px;
    background-color: #000;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="viewport" content="width=device-width, initial-scale=2.0">

<meta name="viewport" content="height=50">

注意：视口，提供有关视口初始大小的提示，仅供多个移动设备使用。

OFC - 您应该使用移动设备对此进行测试！如果你使用普通的浏览器 - 这是你的答案！