字体大小的设置_ios 设置的字体大小与实际的字体大小不一致
如果你覺得本文對您有用，可以關(guān)注我的個人微信公眾號 @前端愛好者社區(qū) 會為你帶來更多的內(nèi)容。
問題重現(xiàn)
一段文字的時候
兩段文字的時候
很明顯，字體放大了很多。
疑點(diǎn)
meta標(biāo)簽縮放的問題
最近正好遇到處理retain屏1px的問題，然后采用的是自動修改meta標(biāo)簽。
/*** Created by jarjune on 2017/7/26.*/ (function (doc, win) {var scale = 1.0;var ratio = 1;if (window.devicePixelRatio == 2) {scale *= 0.5;ratio *= 2;}if (window.devicePixelRatio == 3) {scale *= (1/3);ratio *= 3;}var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale + ',' + ' minimum-scale=' + scale + ', width=device-width,' + ' user-scalable=no" />';document.write(text);var docEl = doc.documentElementvar resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'var recalc = function () {var clientWidth = docEl.clientWidthif (!clientWidth) returndocEl.style.fontSize = 100 * (clientWidth / 750) + 'px'}if (!doc.addEventListener) returnrecalc()win.addEventListener(resizeEvt, recalc, false)// doc.addEventListener('DOMContentLoaded', recalc, false) })(document, window);當(dāng)window.devicePixelRatio == 1時，沒有發(fā)現(xiàn)字體自動放大的問題。
當(dāng)window.devicePixelRatio == 2或者window.devicePixelRatio == 3時，問題就出現(xiàn)了。
科學(xué)解釋【Font Boosting】
這個特性被稱做「Text Autosizer」，又稱「Font Boosting」、「Font Inflation」，是 Webkit 給移動端瀏覽器提供的一個特性：當(dāng)我們在手機(jī)上瀏覽網(wǎng)頁時，很可能因?yàn)樵柬撁鎸挾容^大，在手機(jī)屏幕上縮小后就看不清其中的文字了。而 Font Boosting 特性在這時會自動將其中的文字字體變大，保證在即不需要左右滑動屏幕，也不需要雙擊放大屏幕內(nèi)容的前提下，也可以讓人們方便的閱讀頁面中的文本。
解決方案
問題代碼
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>測試</title><script type="text/javascript" src="js/rem.js"></script><link rel="stylesheet" type="text/css" href="css/base.css"> </head> <body> <p style="font-size: .28rem;">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測</p> <p style="font-size: .28rem;">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測</p> </body> </html>經(jīng)過又一次測試發(fā)現(xiàn)，同樣的代碼，在安卓上文字會自動變大，在ios的3x屏上文字會自動變小，
上文說的設(shè)置max-height:99999px只是在安卓上有用，在3x屏上，需要設(shè)置width為一個固定的值才有效，比如7.5rem，注意！設(shè)置100%也無效！
修改后的代碼
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>測試</title><script type="text/javascript" src="js/rem.js"></script><link rel="stylesheet" type="text/css" href="css/base.css"> </head> <body> <p style="font-size: .28rem; max-height: 99999px; width: 7.5rem;">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測</p> <p style="font-size: .28rem; max-height: 99999px; width: 7.5rem;">測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測</p> </body> </html>最終方案
總結(jié)
以上是生活随笔為你收集整理的字体大小的设置_ios 设置的字体大小与实际的字体大小不一致的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 格式说明_法律文书：公司单位民事起诉状格
- 下一篇： mfc 加密解密_[源码和文档分享]基于