当使用post-px2rem在app中完全适配方案讨论
问题描述
在最近活动页的页面中，发现用手机微信访问页面发生了错乱，当前我使用的是post-px2rem，本想着不应该呀，尝试替换成post-px2vw结果问题就不存在了，但是项目中要求在pc上两边留白边，居中布局显示，这样的话只能用px2rem，变态的需求总是让攻城狮们受尽折磨，所以就尝试解决这个问题。
研究
那就把html标签打印一下吧，
let designWidth = 750;
let rem1 = 75;
let shouldWidth = (75/750)*clientWidth;
document.documentElement.style.fontSize = shouldWidth + 'px';
// 如果屏幕是360 那么这个里应该是36px
//但是通过打印得到 的是40多(这里我在微信app中调整字体为放大了一些)
console.log(getComputedStyle(document.documentElement).fontSize);
打印图显示总是比计算的大一些
解决
解决方案最简单的肯定是通过webview方面，直接禁用字体调整，或者直接使用默认字体，但是市面上各种第三方app作为载体来打开活动页，肯定是不能指望在app端直接设置解决
关于怎么在app端解决这个问题，请看这里，很详细。
1.既然是在微信中，那么用微信给的api禁用一下就完美解决了
(function() {
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
}
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function() {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
});
}
})();
2.那么就通过meta的initial-scale来进行解决
既然font-size会给我自动的乘以一个缩放系数，那么我就把这个缩放系数算出来，然后通过initial-scale进行整体的缩放
(function () {
let clientWidth = document.documentElement.clientWidth;
// 如果postcss按照1rem = 75px来计算的话
let designWidth = 750;
let rem1 = 75;
let shouldWidth = (75/750)*clientWidth;
document.documentElement.style.fontSize = shouldWidth + 'px';
let curSizeStr = getComputedStyle(document.documentElement).fontSize;
let curSize = curSizeStr.split('px')[0];
console.log(curSize);
let scale = shouldWidth/curSize;
var mvp = document.getElementById('viewport');
let m = mvp.getAttribute('content');
let marry = m.split(',');
let index = marry.findIndex((a) => {
if(a.includes('initial-scale')) {
return true;
}
})
if(index !== -1) {
marry[index] = 'initial-scale='+ scale;
} else {
marry.push('initial-scale='+ scale);
}
mvp.setAttribute('content',marry.join(','));
console.log('应该缩放', scale);
})();
比较值得注意的是页面要首先拥有meta
<meta id="viewport" name="viewport"
content="width=device-width,initial-scale=1, user-scalable=no,viewport-fit=cover">
并且需要应当渲染的font-size单位是px，不要使用vw，vw会受到initial-scale属性的影响。
总结
app上webview等浏览器载体会设置字体大小，当渲染页面的时候，会自动对你写的fontsize的值进行乘以一个缩放系数。现在的解决方式基本上就是取巧的方式，可能有很多的未知的问题。 建议在移动端适配上能用vw就用vw吧
