移动端浏览器在设置rem时的区别，用户设置浏览器最大最小字体
背景：移动端布局时候，在设置html根元素的font-size大小，也就是rem的基准值的时候，我们不同浏览器的表现不同（需要考虑用户缩放最大最小字体）。
手机字体设置大小，影响App的页面。
Android的可以通过webview配置webview.getSettings().setTextZoom(100)就可以禁止缩放，按照百分百显示。
我们平常不考虑放大最大最小字体的时候，或者是在混合开发的时候，我们可以用以下处理方式：
版本1:
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 75 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
混合开发的时候，仍然需要谨慎某些手机默认字体很大的情况，像某些三星手机默认字体就是很大，所以部分地方需要考虑是否会溢出到下一行。
浏览器设置字体大小，影响浏览器打开的页面。通过js可控制用户修改字体大小，使页面不受影响。
在考虑到不仅是混合开发还得是各种浏览器的时候，通常一种做法是：
1）用户设置最大字体，js等比例缩小到原来字体大小；
2）用户设置最小字体，js等比例放大到原来字体大小；
一般处理如下：
版本2:
(function(doc, win) {
// 用原生方法获取用户设置的浏览器的字体大小(兼容ie)
if(doc.documentElement.currentStyle) {
var user_webset_font=doc.documentElement.currentStyle['fontSize'];
}
else {
var user_webset_font=getComputedStyle(doc.documentElement,false)['fontSize'];
}
// 取整后与默认16px的比例系数
var xs=parseFloat(user_webset_font)/16;
// 设置rem的js设置的字体大小
var view_jsset_font,result_font;
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
clientWidth,
recalc = function() {
clientWidth = docEl.clientWidth;
if(!clientWidth) return;
if(!doc.addEventListener) return;
if(clientWidth<750){
// 设置rem的js设置的字体大小
view_jsset_font=100 * (clientWidth / 750);
// 最终的字体大小为rem字体/系数
result_font=view_jsset_font/xs;
// 设置根字体大小
docEl.style.fontSize = result_font + 'px';
}
else{
docEl.style.fontSize = 100 + 'px';
}
};
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
晚上资料说：部分的安卓手机rem比例不对的问题。
升级版，版本3：
此升级版无实际动手实验应用，参考自网上资料。
/*
作者:alan
此版本应用于 750px尺寸的 iOS 设计稿
rem计算方式：设计图尺寸px / 100 = 实际rem 【例: 100px = 1rem，32px = 0.32rem】
*/
!function (window) {
/* 设计图文档宽度 */
var docWidth = 750;
var doc = window.document,
docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var recalc = (function refreshRem () {
/* 窗口当前宽度 */
var clientWidth = docEl.getBoundingClientRect().width;
/* 页面宽度大于 750 时不再放大 */
clientWidth = clientWidth > 750 ? 750 : clientWidth;
var oldSize = (clientWidth/docWidth*100) + 'px';
docEl.style.fontSize = oldSize;
/* 获取设置后的字体大小情况 - 因微信设置APP字体大小后会影响该设置 */
var nowSize = window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize;
var oldSizeValue = parseFloat(oldSize,10);
var nowSizeValue = parseFloat(nowSize,10);
/* 当差值大于1时重新按差比计算出正确的px值 */
if((nowSizeValue - oldSizeValue) > 1 || (nowSizeValue - oldSizeValue) < -1){
var diff = (oldSizeValue / nowSizeValue);
docEl.style.fontSize = (clientWidth/docWidth*100*diff) + 'px';
}
// 设置app和新闻详情页最低高度
var aa = window.screen.height;
if(document.getElementsByClassName("xwxq-body").length>0){
document.getElementsByClassName("xwxq-body")[0].style.minHeight=(aa-nowSize.split('px')[0])+'px';
}
document.getElementById("app").style.minHeight=aa+'px'
// alert(nowSize.split('px')[0])
return refreshRem;
})();
/* 添加倍屏标识，安卓为1 */
docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);
if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
/* 添加IOS标识 */
doc.documentElement.classList.add('ios');
/* IOS8以上给html添加hairline样式，以便特殊处理 */
if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)
doc.documentElement.classList.add('hairline');
}
if (!doc.addEventListener) return;
window.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}(window);
结束。
以下说明是基于版本2:
小米自带小米浏览器：在浏览器上调整字体大小，只改变fontSize的大小，不改变width等字体大小。
以下指字体调到最大例子：
console.log("getComputedStyle(document.getElementsByTagName('html')[0],false)['fontSize']---:"+getComputedStyle(document.getElementsByTagName('html')[0],false)['fontSize'])
//打印73.377px
console.log("getComputedStyle-7.5rem--width:"+getComputedStyle(document.getElementsByClassName('page-marquee')[0],false)['width']+"-rem是："+parseFloat(getComputedStyle(document.getElementsByClassName('page-marquee')[0],false)['width'].replace('px','')/7.5))
//打印，getComputedStyle-7.5rem--width:393px-rem是：52.4 （说明：保持与代码设置的一致了）
console.log("getComputedStyle-0.24rem-fontSize:"+getComputedStyle(document.getElementsByClassName('page-marquee-scroll')[0],false)['fontSize']+"-rem是："+parseFloat(getComputedStyle(document.getElementsByClassName('page-marquee-scroll')[0],false)['fontSize'].replace('px','')/0.24))
//getComputedStyle-0.24rem-fontSize:17.6105px---rem是：73.377
QQ浏览器：在浏览器上调整字体大小，改变fontSize大小，也改变width等的大小。
console.log("getComputedStyle(document.getElementsByTagName('html')[0],false)['fontSize']---:"+getComputedStyle(document.getElementsByTagName('html')[0],false)['fontSize'])
//打印77.552px
console.log("getComputedStyle-7.5rem--width:"+getComputedStyle(document.getElementsByClassName('page-marquee')[0],false)['width']+"-rem是："+parseFloat(getComputedStyle(document.getElementsByClassName('page-marquee')[0],false)['width'].replace('px','')/7.5))
//打印，getComputedStyle-7.5rem--width:581.625px-rem是：77.55 （说明：保持与代码设置的一致了）
console.log("getComputedStyle-0.24rem-fontSize:"+getComputedStyle(document.getElementsByClassName('page-marquee-scroll')[0],false)['fontSize']+"-rem是："+parseFloat(getComputedStyle(document.getElementsByClassName('page-marquee-scroll')[0],false)['fontSize'].replace('px','')/0.24))
//getComputedStyle-0.24rem-fontSize:18.6125px---rem是：77.55
==========
小米不特殊处理（按照放大缩小比例颠倒回来）大致都是好的，qq浏览器不按照比例颠倒回来就不行完全错乱，
QQ浏览器：字体调到最小： 不处理 除xs前：39.825px 39.824px 除xs后：52.4px（默认 ） 无处理 width:52.4px 39.824px font-size:52.4px。 39.824px 说明：默认值指：100 * (document.documentElement.clientWidth / 750) + 'px'; QQ浏览器设置浏览器字体大小，文档代码所有元素都起作用，都改变。 小米浏览器：字体调到最小： 不处理 除xs前：36.68px 36.68px 除xs后：52.4px（默认 ） 无处理 width:74.8568px 52.4px font-size:52.4px 36.68px 说明：小米浏览器设置浏览器字体大小，只改变了文档代码的对于font-size属性的值大小，width等不改变。 UC浏览器：字体调到最小： 不处理 除xs前：41.92px 41.92px 除xs后：52.4px（默认 ） 无处理 width:65.5px 52.4px font-size:52.4px 41.92px 说明：UC浏览器设置浏览器字体大小，只改变了文档代码的对于font-size属性的值大小，width等不改变。
综上：uc和小米一个特性，改浏览器字体大小，只改font-size的大小，不改变width等大小。
/xs后，所有浏览器的font-size的大小都正常，恢复默认值52.4：即100 * (document.documentElement.clientWidth / 750)。
/xs后，宽度的1rem变成了74.8568px等，所以小米浏览器和UC浏览器等就不能用rem单位来布局了。原本一屏幕刚好的，现在一屏幕放不下了（调到最小的时候）。
同理，调大最大字体，1rem的宽变小了，原本一屏幕刚好的，现在一屏幕只显示了一半左右（调到最大的时候），其余后边一片区域显示空白。
所以：只需要font-size用rem，这种方式宽度用百分比比较合适，具体页面复杂度，具体灵活应用，高度可以使用px。
wwwover---未完待续。。。
