移动端适配:viewport的浅谈！

最新推荐文章于 2024-12-02 12:11:33 发布

野生技术协会

最新推荐文章于 2024-12-02 12:11:33 发布

阅读量1k

点赞数

分类专栏： web前端文章标签： viewport 移动端适配 pc端适配移动端

本文链接：https://blog.csdn.net/shuixiou1/article/details/79842200

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

;(function(){ 
	 document.write('<meta name="viewport" content="">');
})();

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(上面没设置)的效果！