移动端适配:viewport的浅谈！

最近想把公司pc端的一个功能型网站，适配成移动端相对来说比较容易访问的样子，而改成响应式布局是不可能的，因为该项目功能和页面实在是太紧凑了。所以，就只能从调整缩放，和动态改写样式入手。

一、先说下二种可以全局动态修改此标签属性的二种方法

1、采用document.write(); 它可以在没关闭流的时候，给页面增加东西。

//移动端操作,write必须在响应流没有关闭刷出，才是更新页面，否则是重新刷一个页面出来。
;(function(){ //备注：原网站1000px,被我重写移动端样式的变成850px。
	 document.write('<meta name="viewport" content="width=850,user-scalable=yes,initial-scale=0.65,maximum-scale=0.8">');
})();

2、采用先设定一个meta标签，然后用js改写此meta标签属性的方式，具体操作省略！

二、正式开始分析

第一、忽略其他因素

移动端的手机像素1px，不等于实际的1px。他们一般存在一个比率，而本文抛弃掉此影响，只用一个概念，即移动端的手机正常的屏幕可以容纳多少pc端页面的px值。

第二、定义概念

我们假设手机端存在2个视图，一个是手机屏幕能正常容纳的视图X，还有一个是手机浏览器实际容纳页面大小的视图Y。这个是毫无疑问的，比如你不设定任何值，1000px的pc端页面，会按比例被缩放成X视图，并且你可以放大出现滚动条，就好比手机屏幕内还有一个窗口一样。(亦或者pc浏览器你把横向的缩放条拉成一半，显示的就是手机屏幕，全部的就是实际容纳页面的大小。)

第三、效果分析

我们先来假设下viewport的默认值：在此前先看几个效果

1.<meta name="viewport" content="width=1000, initial-scale=0.32"/>

效果:前面3个可以达到不加此标签的效果。即1000px的网页缩放成300多px，网站全屏显示！最后一个有点特殊，不会显示全屏，在大约1500以内会全屏显示，而超过了1500，手机的Y视图会大于X视图。即有滚动条了。(自我解释，自动缩放时已经超过浏览器像素能适配的尺寸的比例！)

2.<meta name="viewport" content="initial-scale=1"/>

效果：以上4个效果一样，X视图只能显示部分网站，Y视图宽为网站实际大小，即有缩放设置的情况，width值好像无效了，一直等于页面宽。

根据1和2的效果：得出一个初步结论：当不设置initial-scale，手机会把width缩放成X视图的宽度，即全屏。当设置initial-scale,width一直等于页面的宽度，小于页面宽也是页面宽。

第四、常用配置的分析

下面看下一个常见的手机端网页的配置：

从我上面的假想初步结论可以得出:一个1000px的实际网站，用上面这个参数，会出现滚动条即1000的Y视图宽度，并且不能缩放。(结果成立！)，那么假如一个开发页面尺寸为640的就不能采用这个配置(响应式布局除外)。

这种情形，我在网上搜到一个配置:来套用下理论，看下是否合适！

<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){ //>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)：苹果手机和安卓手机2.3以下，只要设置一个宽度就可以了，即这个宽度为开发页面的宽度，而不设置缩放比例，那么640就会在各型手机上缩放成全屏合适的比例，并且设置不能用户缩放。

2)：安卓的新版本，手工设置比例来控制,疑问来了，我测试的就是安卓版本，手机自己缩放也是这个比例啊！注意这个比率的计算，不是控制initialScale(上面没设置),而是把max和min的值设置成一个统一值，达到user-scalable(上面没设置)的效果！(个人假设！)

第五、回归自己的需求：

前面我说了，我有一个1000px的pc网站，页面很紧凑，我怎么才能让它在手机端变的比较好看点呢？

我做了2件事情，

第一：重写移动端页面的尺寸，从1000px到850px左右，即增加了一个移动端的css样式。

第二：手动设置初始化缩放为0.60,最高可以放大到650左右容器(Y视图)，装850px的页面，最小只能缩放到一个手机页面的大小即X视图宽度（不需要设置）！

 document.write('<meta name="viewport" content="width=850,user-scalable=yes,initial-scale=0.60,maximum-scale=0.8">');

补充-----------昨天匆忙写，没说清楚一个情况，因为我的需求是pc端页面有定宽的，而没有设置max-width并且也没有设置定宽的时候，那么这个时候设置content=width=xxx就有意义了，因为当你设置的值，大于页面真实尺寸的时候，会按你设置的值作为Y视图的宽，而你设置的值少于页面真实尺寸时，按页面的真实尺寸。所以，这也是为什么响应式布局只要加上一句 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />就可以了。因为响应式布局它页面就没有设置宽度，所以device-width就起效，而设置了缩放比例都是1，所以X视图和Y视图重合了。

移动端适配:viewport的浅谈！

最近想把公司pc端的一个功能型网站，适配成移动端相对来说比较容易访问的样子，而改成响应式布局是不可能的，因为该项目功能和页面实在是太紧凑了。所以，就只能从调整缩放，和动态改写样式入手。

猜你喜欢