CSS中-webkit-text-size-adjust:none如何兼容blink?


-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( ) 縮小到合適值。


blink壓根就沒這屬性,不兼容


blink 自己應該是兼容 -webkit- 的吧

Developer FAQ

Will we see a -chrome- vendor prefix now?

... For legacy vendor-prefixed features, we will continue to use the -webkit- prefix because renaming all these prefixes to something else would cause developers unnecessary pain...

Blink - The Chromium Projects

Vendor Prefixes... Going forward, instead of enabling a feature by default with a vendor prefix, we will instead keep the (unprefixed) feature behind the 「enable experimental web platform features」 flag in about:flagsuntil the feature is ready to be enabled by default...

Blink 會兼容以前遺留下來的 -webkit- 屬性,在適當的時候再逐個看情況考慮放棄 prefix 支持(轉為支持無前綴的屬性)。以後 Blink 新引入的 feature 不會再有 prefix,但是默認關閉實驗中(不穩定)的 feature,需要在設置中打開。而比較成熟的屬性就直接支持 non-prefix 的。

所以,我想問題主是已經遇到了什麼困難了?

否則,暫時不用考慮,就繼續用以前的就行。


推薦閱讀:

Windows 提供高對比度主題有什麼意義?
html css php js之間的關係?
為什麼有人噴amaze ui?
在前端開發中,頁面渲染指什麼?
關於 CSS 設計,有什麼書比較好?

TAG:前端開發 | CSS | CSS布局 |