iPad上基於百分比的CSS布局中斷

Question

我正在嘗試按照客戶的規范對網站進行編碼。 我現在所看到的在OSX Safari，Firefox和Chrome上運行良好。 未經PC測試。 在iPad上快速中斷。 並且在iPhone上完全感到厭煩。

這是我現在的位置： http : //geofkern.com/14v0.1/jewelrySeries.html

每個元素的大小均以窗口高度的百分比表示，因為客戶端用於刷新可縮放至窗口大小的站點，並希望其圖像顯示盡可能大。 在iPad上，如果我以橫向模式打開頁面，然后立即單擊菜單按鈕，彈出菜單，並且所有內容均以適當的大小顯示。 但是，一旦我滾動，重新加載或嘗試以縱向查看，菜單按鈕就會停止工作，或者沒有以正確的大小顯示任何內容（即使它仍然可見）。 我嘗試過更改視口元設置，但似乎沒有任何組合有效。 我很想讓它保持可伸縮性，但是基於百分比的大小似乎在除1.0之外的任何比例上都變得怪異。

有什么明顯的我想念的地方嗎？ 有沒有更好的方法可以做到這一點？ 有人看到我的頁面為什么在移動設備上如此不穩定地顯示嗎？

Answer 1

因此，似乎最大的問題是iOS尚不支持視口相對單位。 將它們全部改回了％單位，我的大多數問題都已解決。 仍然不太像在台式機上那樣，但是至少它不再“完全無聊”。