蕪湖不蕪
2019-03-28 19:15:10
電腦上排版是滿頁的,在手機(jī)上看,字體變小了,下面有很大的空白了。css屬性font-size:12px;怎樣才能讓電腦上和手機(jī)上看到的文字大小一致呢?頁面頭部已經(jīng)添加了:<meta name="viewport" content="width=device-width, initial-scale=1.0">白色DIV是固定px值的;然后又根據(jù)屏幕的尺寸,動(dòng)態(tài)計(jì)算了transform: scale(0.741538);頁面是自動(dòng)縮放到剛合適屏幕展示的。經(jīng)過測試和transform縮放無關(guān),和viewport無關(guān),font-size:1em也會(huì)變小。目前還是不知道是哪里的原因,字體會(huì)小一些。
4 回答

慕絲7291255
TA貢獻(xiàn)1859條經(jīng)驗(yàn) 獲得超6個(gè)贊

繁花不似錦
TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超4個(gè)贊
看截圖好像沒寫viewport(所以看到的其實(shí)是整個(gè)頁面縮小的效果,字當(dāng)然也會(huì)小咯),最好寫一下吧,然后再視情況做響應(yīng)式處理(重新排版,包括處理布局、縮放及DPR響應(yīng)等)。
那就看下設(shè)備DPR唄,log下window.devicePixelRatio
的值

海綿寶寶撒
TA貢獻(xiàn)1809條經(jīng)驗(yàn) 獲得超8個(gè)贊
固定寬度和transform: scale的問題。
移動(dòng)端可以直接使用媒體查詢適配,你使用的transform: scale 同時(shí)影響到了字體。
添加回答
舉報(bào)
0/150
提交
取消