移動端開發網頁時,有部分字型無故變大或變小

2022-05-18 08:56:01 字數 566 閱讀 2960

今天發現手機端,字型大小會隨著容器的寬度變化而變化,著很奇怪,加了統一的字型大小樣式都不行,於是查了一下:

首先,這個準確說不是由開發人員導致的bug,這是webkit核心移動瀏覽器特性導致的,這個特性被稱做「text autosizer」,又稱「font boosting」、「font inflation」,是 webkit 給移動端瀏覽器提供的乙個特性:當我們在手機上瀏覽網頁時,很可能因為原始頁面寬度較大,在手機螢幕上縮小後就看不清其中的文字了。而 font boosting 特性在這時會自動將其中的文字字型變大,保證在即不需要左右滑動螢幕,也不需要雙擊放大螢幕內容的前提下,也可以讓人們方便的閱讀頁面中的文字。

解決方法

1.元素單獨設定width或height或max-height;

max-height:100%;,因為內容顯示一般不會固定高和寬。

2.給元素設定-webkit-text-size-adjust: none;

可禁用text autosizer,這個屬性還能使得我們在移動端使用小於12px的字型。此屬性在桌面版中無效。

參考**:

Django開發網頁時建立超級使用者

python manage.py createsuperuser 二 接下來輸入使用者名稱 username root 自定義 三 然後是輸入郵箱 qqemail等都可以 email address 輸入你的郵箱賬號 四 輸入密碼 輸入密碼時不會顯示出來,並且長度必須超過八位才行 password ...

移動端網頁開發 vh vw rem

第一次做移動端網頁開發,接觸到的幾個單位vh vw rem,記錄一下。vh 相對可見視區的高度 vw 相對可見視區的寬度 rem 相對根元素的字型大小 視區 所指為瀏覽器內部的可視區域大小,即window.innerwidth window.innerheight大小,不包含工作列標題欄以及底部工具...

jsoup開發網頁客戶端3

這個系列好久沒更新,最近好忙,老大說未來是html5的,所以最近一直學習前端以及html5的一些東西。android5.0的誕生,讓我們眼前一亮,獨特的material風格更是吸引了無數人。話說不學習學習就要落伍了,剛好自己一直很喜歡看這個 的東西 就爬了過來,於是就有了下面這個東西,功能還剛剛開始...