[html5]使用meta标签来设定自适应手机端屏幕宽度

使用meta标签，这也是普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

首先解释该标签的含义：

<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动态生成此标签，当然，应该先获取屏幕尺寸。

<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> 
 

 对于此标签还有以下需要分享：

1)、user-scalable=no就一定可以保证页面不可以缩放吗？NO，有些浏览器不吃这一套，还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。

2)、initial-scale=1.0   初始缩放比例受user-scalable控制吗？不一定，有些浏览器会将user-scalable理解为用户手动缩放，如果user-scalable=no，initial-scale将无法生效。

3)、手机页面可以触摸移动，但是如果有需要禁止此操作，就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。

4)、如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。

以上是使用viewport标签的一些小体会，分享给大家。

• 2017-02-06[html5]html5视频音频API说明
• 2017-02-05[html5]html5视频播放器控制视频的操作源代码范例
• 2017-02-04[html5]html5视频播放器中video和audio标签的使用说明附源代码
• 2017-02-04[html5]html5的Address元素标签
• 2017-02-04[html5]html5获取视频时长的代码