“ width = device-width”在移動瀏覽器上的固定大小的布局上並不總是有效嗎？

Question

我有一個固定寬度的布局，它的viewport屬性設置為：

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

因此，即使我固定的布局寬度比設備的寬度寬，我也希望渲染的頁面適合設備的寬度。

我知道initial-scale=1屬性，但我不需要它，因為我的布局不流暢。

我的問題是，為什么當頁面內容的高度不足以滾動時，width = device-width在移動瀏覽器中不起作用：

JSBIN示例1

...當內容的高度足夠長而必須滾動時，它可以工作：

JSBIN示例2

PS：我知道在兩個頁面上都設置width = my-fixed-width甚至刪除所有視口設置都可以解決此問題。 我的問題是為什么會以上？

Answer 1

HTML和CSS是奇怪的事情。 似乎規則“寬度>高度”在起作用