請幫助我瞭解移動Safari的文字大小調整

默認情況下，移動Safari會調整某些文本的大小，其中包括<h1>和<h2>元素。我找遍所以看我怎麼能防止和發現的問題，如這些：請幫助我瞭解移動Safari的文字大小調整

注意，回答所有這些是CSS屬性：

-webkit-text-size-adjust:none;

這對於保持標頭與標頭之間的相對文字大小非常有用移動Safari上的d段元素。不過，我偶然發現一個博客帖子剛纔題爲Beware of -webkit-text-size-adjust:none：

什麼，做是防止基於WebKit的瀏覽器調整大小的文本。即使整頁縮放也不能調整文本的大小。現在，如何防止用戶調整文本大小是一個好主意？

根據Apple的Safari CSS Reference (JavaScript required)，-webkit-text-size-adjust「指定在iOS上的Safari中顯示文本內容的大小調整」。

當給定值「none」時，文檔指定「文本大小未調整」。現在

，我把財產的描述意味着相對文本大小不會自動調整，而不是文字大小不能可以由用戶調整，但作者說，他的測試顯示，當指定值'none'時，文本確實無法在基於WebKit的瀏覽器中進行調整。

（目前我在哪裏，我無法驗證這在所有的位置，但我要承擔他和其他人誰提出索賠是正確的。）

所以我的問題是：如何能一個增益控制移動Safari中的標題和段落之間的相對文本大小而不犧牲可訪問性？

來源

2011-03-15 Corey

http://news.ycombinator.com/item?id=1902432這是首選的解決方案？ – Corey 2011-03-15 16:51:59

這裏的關鍵問題，據我瞭解，當應用在自己的這條規則 - 因爲當值是「無」它適用於任何WebKit瀏覽器，無論是臺式機，手機大小，或片劑。就我所知，桌面webkit瀏覽器不會應用任何其他值（-webkit-font-size-adjust：150％;什麼都不做）。

當'無'應用於iOS上的移動Safari或任何移動Webkit瀏覽器（Android等）時，您會感覺到'正確'的效果：瀏覽器不會嘗試調整字體大小你的一些元素，你（設計師）仍然在相互控制它們的大小。 您仍然可以捏放/縮放並雙擊縮放以放大/縮小視口。移動瀏覽器進行視口縮放，而不是文本縮放。

但是，當此規則適用於桌面webkit（Safari，Chrome）時，感覺不對，因爲桌面webkit確實會進行文本縮放，並且此規則可防止發生此情況。

所以 - 解決方案是隻針對這個規則的移動webkit。CSS媒體查詢是這種邏輯的答案，但管理目標所有的iOS設備是有點笨重和不準確的：

@media screen and (max-device-width: 480px), 
     screen and (-webkit-min-device-pixel-ratio: 2), 
     screen and (device-width: 768px) { 
    body { 
    -webkit-text-size-adjust:none; 
    } 
}

這應該讓你所有的iPhone手機到3GS（第1章），iPhone 4 （第二條規則）和iPad（第三條規則）。第三條規則在理論上應該與桌面Safari相匹配，當視口寬度恰好爲768px時 - 但在實踐中似乎沒有。

說實話，我不確定使用javascript檢測移動Safari並將類添加到文檔正文以應用規則並不會更好。這樣，當有新顯示器的設備出來時，你不需要改造新的規則。

來源

2011-03-23 05:23:22 Beejamin

確實的答案。感謝您付出的努力。 – Corey 2011-03-23 14:15:38

這CSS似乎並沒有爲我工作。我只使用 '@media唯一屏幕和（max-device-width：480px），僅屏幕和（設備寬度：768px），僅屏幕和（-webkit-min-device-pixel-ratio：2）{ body {-webkit-text-size-adjust：none;} }' – zeroimpl 2012-02-08 02:57:06

你能更具體一些什麼沒有工作？一個示例URL將會非常有用，並且可以幫助您瞭解您正在測試的設備...... – Beejamin 2012-02-08 23:46:52

請暫停以考慮移動Safari可能需要調整文本大小的原因。移動Safari（如Android的Chrome瀏覽器，Mobile Firefox和IE Mobile）會增加寬塊的字體大小，例如，如果您雙擊放大該塊（該塊適合屏幕寬度），則文本將爲清晰可辨。如果你設置了-webkit-text-size-adjust: 100%（或者none），它將無法做到這一點，所以當用戶雙擊以放大寬塊時，文本會變得非常小;如果用戶捏合放大，用戶將能夠閱讀它，但是文本將比屏幕更寬，並且它們必須水平平移才能閱讀每行文本！

我列出了在an earlier answer中解決這個問題的可能方法。

來源

2011-04-04 14:49:42

我一直使用@ Beejamin的解決方案，因爲他建議，但我會給移動特定的CSS一些考慮。我的內容寬度爲388px（稍微超過您提到的320px的閾值），並且在縮放時清晰可見。移動專用的CSS可以滿足320px「標準」的要求，而不僅僅是讓我的網站更具可讀性，這使得它看起來多餘。無論哪種方式，標題不應該比段落文本小。我認爲這違反了最小驚訝原則。 – Corey 2011-04-04 16:10:03

看來在接受的答案中有一個括號錯誤，導致它不能在橫向模式下工作。

這裏是一個修正版本：

@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2), screen and (device-width: 768px) { 
    body {-webkit-text-size-adjust:none;} 
}

來源

2013-04-17 10:47:15 Spone

我已編輯/更正原始答案。 – 2014-07-14 21:28:52

請幫助我瞭解移動Safari的文字大小調整

回答

相關問題