字體大小與iPhone的問題

我目前正在使用移動版本的網站，一切都很好，在iPhone，黑莓和Android上都能正常工作。字體大小與iPhone的問題

我有一個輕微的問題，沒有什麼大不了的，但仍然有點煩人。我有：

<h1>標籤設置爲18像素，大膽
<h2>標籤設置爲12像素，大膽
<p>標籤設置爲12像素，並在縱向觀看時在iPhone上正常

現在一切都看起來不錯，但是當該設備旋轉爲橫向的<h1>冠軍去更小的（很難說，但有可能比<h2>標籤？

這裏小是我的CSS：

h1 { 
color:#FFFFFF; 
font-size:18px; 
line-height:22px; 
font-weight:bold; 
margin-top:0px; 
} 

h2 { 
font-size:12px; 
color:#333333; 
font-weight:bold; 
margin-bottom:-5px; 
} 

p { 
color:#333333; 
font-size:12px; 
line-height:18px; 
font-weight:normal; 
}

來源

2010-08-12 Ryano

[當iPhone的方向從縱向變爲橫向時保留HTML字體大小]的可能重複（http://stackoverflow.com/questions/2710764/preserve-html-font-size-when-iphone-orientation-changes-從肖像到景觀） – Blazemonger 2012-05-30 22:09:29

我相信你在你的CSS尋找這樣的：

html { 
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */ 
}

來源

2010-08-12 09:49:07

完美的作品！歡呼聲，應儘快將答案標記爲正確！ – Ryano 2010-08-12 09:51:09

謝謝!!!!!! – 2011-09-01 07:17:30

No problemo dude！ – 2011-09-02 09:03:33

正如Neurofluxation的回答說，你可以使用CSS規則-webkit-文字大小調整，但要注意，這可以防止用戶調整桌面Webkit上的字體大小（更多詳細信息，請參閱this article）。

鑑於此，可能值得通過CSS3媒體查詢（或用戶代理）檢查是否安全。

例如，

@media only screen and (max-device-width: 480px) { 
    html { 
     -webkit-text-size-adjust: none; 
    } 
}

來源

2011-11-17 19:56:45 AlexD

一個更好的解決方案可以使用100％，而不是沒有，作爲一個老線程通過user612626指出： Font size rendering inconsistencies on an iPhone

body { 
    -webkit-text-size-adjust: 100%; 
}

這樣桌面WebKit瀏覽器可以調整大小和縮放比例也是如此。我認爲這是比屏幕尺寸過濾更好的方法。

希望它有幫助。

來源

2012-08-29 18:36:01

字體大小與iPhone的問題

回答

相關問題