我正在開發一個網站，在桌面上，在所有媒體斷點和DevTool的響應移動預覽上呈現所有權利。但是當我仔細檢查兩部手機(一部三星和一部華為，使用谷歌Chrome 113.0.5672.76)時，一些& ltp & gt的縮放比例更大，而其他的沒有。這是根據設備的“文本大小”系統設置而發生的:“正常”將按照預期的大小呈現文本，而“巨大”將只縮放頁面的選定部分，因此破壞了一致的設計。我試圖要么什么都不縮放，要么什么都不縮放。由于我已經設置了媒體查詢，可以根據不同的屏幕大小適當調整字體大小，所以我更愿意保持控制。另一方面，如果一個視力有障礙的人什么也看不到，為什么不呢？但是我一直需要它。
頁面的這一部分在移動設備上被縮放:
<html><body><div><section><div> <div><div><div><p>TEXT相應的相關CSS設置:
html { font-size: 62.5% } /* default browser font size = 16px => 10px */
body { 2rem } /* =20px */DOM樹下面的所有東西都是繼承而來的。在許多元素上，有各種媒體查詢將字體大小更改為適當的em值。
現在，同一頁面上的以下路徑不與電話設置成比例:
<html><body><div><section><div> <p>TEXT我在一些手機上讀到了自動調整文本大小，因此添加了以下CSS:
* {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}為了抑制縮放，我還添加了具有非常高特異性的HTML/CSS:
<html id=htmlId class=htmlClass>
<body id=bodyId class=bodyClass>而對于具體的第一& ltp & gt被縮放的節點:
<p id=pId class=pClass style='font-size: 20px !important'>樣式表末尾的這個CSS:
html, #htmlId, .htmlClass { font-size: 10px !important }
html >body >div section >div >div >div div p[id='pId'],
p#pId, p.pClass, #bodyId, .bodyClass {
font-size: 20px !important;
}(我想在這一點上我的冷靜是顯而易見的。)
這并沒有以任何方式改變渲染。還是第一個& ltp & gt已縮放。
我能做些什么來獲得一致的擴展？