字体大小的设置_ios 设置的字体大小与实际的字体大小不一致
生活随笔
收集整理的這篇文章主要介紹了
字体大小的设置_ios 设置的字体大小与实际的字体大小不一致
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
問題緣由：做文章詳情頁的時候，文字多了一點字體就放大了，真的是奇了怪了。<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no"> 縮放比設為1，至于1px之類的問題可以采取其他方案解決。 給元素指定高度(想想是不太現實的)，不過設置max-height:99999px也有效。 設置text-size-adjust：none，不過大部分瀏覽器都不兼容。 <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, user-scalable=no"> 縮放比設為1，至于1px之類的問題可以采取其他方案解決。 height設置max-height:99999px，width設置固定大小。 設置text-size-adjust：none，不過大部分瀏覽器都不兼容
如果你覺得本文對您有用，可以關注我的個人微信公眾號 @前端愛好者社區 會為你帶來更多的內容。
問題重現
一段文字的時候
兩段文字的時候
很明顯，字體放大了很多。
疑點
meta標簽縮放的問題
最近正好遇到處理retain屏1px的問題，然后采用的是自動修改meta標簽。
/*** 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);當window.devicePixelRatio == 1時，沒有發現字體自動放大的問題。
當window.devicePixelRatio == 2或者window.devicePixelRatio == 3時，問題就出現了。
科學解釋【Font Boosting】
這個特性被稱做「Text Autosizer」，又稱「Font Boosting」、「Font Inflation」，是 Webkit 給移動端瀏覽器提供的一個特性：當我們在手機上瀏覽網頁時，很可能因為原始頁面寬度較大，在手機屏幕上縮小后就看不清其中的文字了。而 Font Boosting 特性在這時會自動將其中的文字字體變大，保證在即不需要左右滑動屏幕，也不需要雙擊放大屏幕內容的前提下，也可以讓人們方便的閱讀頁面中的文本。
解決方案
問題代碼
<!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>經過又一次測試發現，同樣的代碼，在安卓上文字會自動變大，在ios的3x屏上文字會自動變小，
上文說的設置max-height:99999px只是在安卓上有用，在3x屏上，需要設置width為一個固定的值才有效，比如7.5rem，注意！設置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>最終方案
總結
以上是生活随笔為你收集整理的字体大小的设置_ios 设置的字体大小与实际的字体大小不一致的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 格式说明_法律文书：公司单位民事起诉状格
- 下一篇： 中值滤波_Halcon联合C#编程自学笔