[html5]手机html5页面如何自适应手机屏宽源代码

[html5]手机html5页面如何自适应手机屏宽源代码范例

<script type="text/javascript">   
    var phoneWidth =  parseInt(window.screen.width);   
    var phoneScale = phoneWidth/640;   
    var ua = navigator.userAgent;   
    if (/Android (\d+\.\d+)/.test(ua)){   
        var version = parseFloat(RegExp.$1);   
        if(version>2.3){   
            document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘);   
        }else{   
            document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘);   
        }   
    } else {   
        document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘);   
    }   
</script>   

首先解释该标签的含义：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

如果你完全不了解这个标签的使用需要先百度一下。

解释：content中的“width” 这个width指的是什么宽度，我看过的文章对这个都没有解释的很清楚，有几个备选：虚拟窗口的宽度、手机屏幕的宽度、还是页面的宽度等等？经试验这个指的是虚拟窗口的宽度。了解宽度之后，对后续的各种scale，就应该知道是谁与谁的比例，是 虚拟窗口宽度 / 页面宽度，这样就会有问题出现安卓设备尺寸差异很大光主流的就有宽度为 320 480 720 1080 等各种尺寸而以上标签只能支持一种尺寸，当然有些浏览器会自动缩放使其适应屏幕，但这不是统一标准，正确的做法是用js动态生成此标签，当然，应该先获取屏幕尺寸。