如何禁用MobileSafari的內容縮放方向更改？

我正在做我的應用程序支持網站的移動版本，我這裏有一個小的WebKit /的iOS/HTML/CSS問題...如何禁用MobileSafari的內容縮放方向更改？

我有一個頁面，index.php，附有mobile.css文件。在我<head>標籤我有：

<meta name="viewport" content="width=device-width, user-scalable=no, max-scale=1.0" />

我body的CSS：

body { 
    font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue","Helvetica","Lucida Grande",Verdana,Arial,sans-serif; 
    margin: 0; 
    background: url(../../images/textured_bg.png) repeat; 
    color:#454545; 
    font-size: 14px; 
    text-shadow: rgba(255, 255, 255, 0.5) 0 1px; 
    width:100%; 
}

一切正常，在縱向方向，但是當我轉動我的iPhone到風景，Safari瀏覽器擴展我的內容，所以它看起來就像在肖像，但有點大：

enter image description here

我的問題：有沒有辦法，沒有making custom css for each orientation，強制Safari不擴展我的內容？

來源

2011-08-18 akashivskyy

我自己沒有iphone，但這是手機的正常行爲嗎？用戶是否希望在切換方向時縮放內容？ – Jrod

也許，但我不希望我的內容被縮放，因爲我的圖像變得像素化。 PS：有些網站不會縮放其內容，例如StackOverflow：http://cl.ly/0o0t2N2225063T2N2E05 – akashivskyy

如果像素化圖像是問題，你可以考慮使用svg代替。 – Ludder

您可能會想要使用<meta name="viewport" .../>標記（請參閱MDN docs和Safari Web Content Guide）。移動堆棧交易所佈局使用此：

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

來源

2011-08-18 20:02:12 jtbandes

我用逗號（'，'）代替分號（';'）...對我感到羞恥...... – akashivskyy

MDN說使用逗號，Apple說分號。但似乎都可以使用分號。 –

的關鍵部分，以確定這是不是中繼檢視區標記（儘管這也很重要，但出於不同的原因）。這是修正方向變化的文字大小的魔法。

html { 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
}

（我得到這個從StackExchange的移動CSS文件）

來源

2011-09-01 17:11:05

我認爲這是最好的答案。禁用用戶縮放並不是很方便用戶。欲瞭解更多信息，請參閱http://www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ – 2011-11-28 22:57:08

如果在onorientationchange'觸發時文本輸入爲焦點，則這不起作用。看看[demo here]（https://idorecall.com/static/bug-demos/mobile-safari-content-scaling-on-rotation-in-input/）。 –

我試過逗號，沒有工作 - 然後試圖分號，即沒有工作。 iPod touch，iOS 4.2

來源

2012-03-27 21:58:39 tim

如何禁用MobileSafari的內容縮放方向更改？

回答

相關問題