前端内容繁复，平时难免会碰到一些奇奇怪怪或者暂时无法理解的问题，所以特开此文将这些问题记录下来。
屏幕适配问题
问题描述：移动端的屏幕适配问题，至今没有想明白是什么原因
出现场景：移动端App webview内。
复现步骤：刚开始手机字体大小为正常，打开页面后将App切后台，调整手机字体大小到最大，即出现这种情况。理论上webview内部不应该受到系统字体的影响，在原生中将该功能禁用即可。但是奇怪的是根元素的字体大小确实设置为18px，最终计算出来的字体大小却是27px。
html中已经禁止了页面缩放，但是并没有效果。
1
| <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
|
解决方案：计算最后放大了多少倍，同比缩小：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| (function() {
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var resizeTimeout;
function resizeThrottler() {
if (!resizeTimeout) {
resizeTimeout = setTimeout(function () {
resizeTimeout = null;
actualResizeHandler();
}, 66);
}
}
function actualResizeHandler() {
var fontsize = /^\d+/.exec(document.documentElement.style.fontSize);
var cmtFont = /^\d+/.exec(window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize);
var radio = Number(fontsize) / Number(cmtFont);
if (radio !== 1) {
document.documentElement.style.fontSize = 18 * radio + 'px';
}
}
if (!document.addEventListener) return;
window.addEventListener(resizeEvt, resizeThrottler, false);
document.addEventListener('DOMContentLoaded', resizeThrottler, false);
})();
|
一次偶然的发现，找出了上述问题的原因：DPR。由于系统字体变大，导致DPR变大，进而最终计算属性与设置属性不同。