为什么pc调试和在手机端看效果差这么多:
库: Vue, Webpack
浏览器: Chrome
布局: absolute
PC效果:
htc QQ 里面打开:

这是我的适配代码:
(function(win) {
var doc = win.document,
html = doc.documentElement,
baseWidth = 720,
rem = baseWidth / 100,
resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = html.clientWidth || 320;
// if( clientWidth > 750 ){ clientWidth = 750 };
html.style.fontSize = clientWidth / rem + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', function() {
setTimeout(recalc)
}, false);
})(window);
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0"> 去掉这个看看
我一般采用百分比布局。REM这种东西有时候还是不靠谱,计算也麻烦。
你把计算到的font-size alert出来看看就知道了。
具体看参考淘宝的方案使用Flexible实现手淘H5页面的终端适配
https://github.com/amfe/lib-f... 这是一个适配方案,亲身经历,相当好用 github上搜索这个项目lib-flexible
建议看看这篇文章,对你帮助会很大:使用Flexible实现手淘H5页面的终端适配