text-size-adjust屬性


    在慕課上無意中看到-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;這兩段代碼,居然發現自己完全不理解,然后就去問度娘了,以下是一些整理:

    有人說“html { text-size-adjust: 100%; }是解決 iPhone 橫屏時默認會放大文字的問題,可是我試過,上面的css並不能解決,然后我發現 meta viewport 的initial-scale=1 倒是可以解決這個放大問題。<meta name="viewport" content="width=device-width,initial-scale=1"/>”,“iPhone 和 Android 的瀏覽器縱向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自動調整字體大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。text-size-adjust 設為 none 或者 100% 關閉字體大小自動調整功能。”這些理解都不算完整,結合下面的理解可能更為具體點。

    -webkit-text-size-adjust 的本職是用於mobile的,見規范 CSS Mobile Text Size Adjustment Module Level 1 和 apple 的 Safari Web Content Guide之所以現在的桌面版webkit瀏覽器支持他,是因為實際上這是一下bug。Bug 56543 – CSS property "-webkit-text-size-adjust" means different things in Safari and iOS這個bug在最新版的 WebKit Nightly Builds 里已經被修復了。這屬性現在的一般用處是防止iPhone在堅屏轉向橫屏時放大文字(注意,就算viewport設置了maximum-scale=1.0 文字還是會放大的)。而且iPhone和iPad的默認設定是不一樣的,iPhone默認設定 -webkit-text-size-adjust: auto;iPad默認設定 -webkit-text-size-adjust: none;所以iPad默認是不調節的。

    此屬性還支持百分比,這在當前的桌面版的webkit瀏覽器是不支持的,所以如果不想讓iPhone橫堅屏切換的時候調節文字,用 -webkit-text-size-adjust: 100%; 絕對不能用 -webkit-text-size-adjust: none; 這會導致仍然支持 -webkit-text-size-adjust: none;的桌面版的webkit瀏覽器無法人為放大文字大小,嚴重影響可用性。

關於如何在chrome里實現小於12px的文字。

當然文字縮小到12px以下本來就一定程度影響到可用性了,建議無視chrome的這個特性。

硬要實現的話,我想到的一個變通方法是先用js判斷是否為chrome (至今還沒聽說有區分safari 和 chrome 的 css hack )

var isChrome = !!window.chrome; 

再用-webkit-transform: scale( ) 縮小到合適值。

    以上都是他人的理解,我也只是全部融合在一起,至於具體如何,還得慢慢研究試驗,畢竟還沒接觸到手機端部分。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM