此代码根据屏幕尺寸计算html font-size, 可实现1px像素border。
当页面宽度为375px;对应的物理像素为750px;
可直接根据750px设计稿里面的元素尺寸计算相应的rem值(其html font-size为20px)。
建议使用scss定义一个function,代码如下:
@function px2rem($px){
$rem : 16px; // 基于屏幕宽度为750px 的html字体大小。
@return ($px/$rem) + rem;
}
通用代码入下:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 禁止数字识别为电话号码 -->
<meta name="format-detection" content="telephone=no">
<!-- 忽略邮箱 -->
<meta name="format-detection" content="email=no">
<script>
var viewport = document.querySelector("meta[name=viewport]");
// 以物理像素显示页面元素
var scale = 1/window.devicePixelRatio;
if (window.devicePixelRatio == 1) {
viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');
}else if(window.devicePixelRatio == 2) {
viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');
}else if(window.devicePixelRatio == 3) {
viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');
}else{
viewport.setAttribute('content', 'width=device-width,initial-scale='+scale+', maximum-scale='+scale+', minimum-scale='+scale+', user-scalable=no');
}
var docEl = document.documentElement;
var fontsize = 8 * (docEl.clientWidth / 375) + 'px';
docEl.style.fontSize = fontsize;
window.onresize=function(){
fontsize = 8 * (docEl.clientWidth / 375) + 'px';
docEl.style.fontSize = fontsize;
}
</script>