如何限制橫向放大的iPhone和Android橫向放大的網頁？

Question

如何限制網頁的縮放拉伸時，iPhone和Android在橫向方向？

當我旋轉iPhone到橫向，頭需要在屏幕上30％的空間，但在肖像模式下只需要15％。

我需要編寫不同的CSS在橫向某些元素？

Answer 1

您可以使用視meta標籤，as described by Mozilla。 Apple Documentation for developing web content for iPad也很好地描述了這個標籤。蘋果建議：

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

編輯：

在你的情況，你可以試試這個：

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width;"> 

你可以嘗試使用the technique mentioned here，使用不同樣式的不同取向。

Answer 2

嘗試添加WebKit的CSS

body { 
    -webkit-text-size-adjust:none; 
} 

它基本上停止的字體大小，當你去到景觀進行調整。

謹慎使用，因爲如果你讓這個CSS通過桌面客戶端Safari瀏覽器中讀取，然後它會阻止影響字體大小的任何用戶縮放嘗試。