“width = device-width”并不总是适用于移动游猎的固定大小的布局？

Question

我有一个固定宽度的布局，它的viewport属性设置为：

<meta name="viewport" content="width=device-width">

所以我希望渲染的页面适合设备宽度，即使我的固定布局宽度比设备的宽度宽。

我知道initial-scale=1属性，但我不需要它，因为我的布局不流畅。

我的问题是，为什么当页面内容的高度不足以滚动时，width = device-width不能用于移动游侠：

JSBIN Example 1

...当内容的高度足够长以至于你必须滚动时它会起作用：

JSBIN Example 2

PS：我知道在两个页面上放置width = my-fixed-width甚至删除所有视口设置都可以解决问题。我的问题是上面的原因？

Answer 1

HTML和CSS是奇怪的事情。 似乎规则“宽度＆gt;高度”在行动中