移动端适配方案1, 采用一个基准宽,对当前viewport进行缩放
相关代码如下:
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<script type="text/javascript">
var clientWidth = document.documentElement.clientWidth,
viewport = null,
viewportWidth = 'device-width',
viewportScale = 1,
normalWidth = 2048;
if (clientWidth > normalWidth) {
viewport = document.getElementById('viewport');
viewportScale = clientWidth / normalWidth;
viewportWidth = normalWidth * (normalWidth / clientWidth);
viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0');
}else if(clientWidth < normalWidth){
viewport = document.getElementById('viewport');
viewportScale = clientWidth / normalWidth;
viewportWidth = normalWidth * viewportScale;
viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0');
}
</script>