关于移动端的viewport解释

原标题：关于移动端的viewport解释

下面这段代码相信大部分做移动端开发的人员都很熟悉：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">但实际上大部分人只是引入了而已，这段代码并没有起到它实际的作用；为什么要引入这段代码，因为在做移动端开发的过程中移动设备的不同其所对应的屏幕尺寸也不近相同；我们希望所有的移动设备都按照一个固定的尺寸去显示我们的网页，而不是把所有的页面元素宽高按照百分比来设置，毕竟这样与设计人员给我们的原稿来说不准确；

看看这段meta，width=device-width是设置页面的宽度与设备的宽度相同；这等同于body{width:100%};initial-scale、maximum-scale、minimum-scale分别设置的是设备的对页面的缩放比；如果viewport按照上面的的参数来设定是毫无意义的；接下来我们再来看看这段代码：

<meta content="target-densitydpi=device-dpi,width=640,user-scalable=no" name="viewport">

target-densitydpi=device-dpi是设置页面的分辨率等于设备的分辨率；

width=640是设置页面的尺寸等于640px;

initial-scale、maximum-scale、minimum-scale这三个参数都没有设置，如果我们这样设置的话就达到了前面所说的我们可以以一个固定的尺寸去设计我们的页面，自适应的事情就是浏览器的事儿了；他会根据window.screen.width/640的比值去自动缩放这个页面；如果我们显式的设置了initial-scale=1、maximum-scale=1、minimum-scale=1那么就又回到了刚开始那段代码meta；所以在做移动端开发时我不会去设置这三个值；如果非要设置可以这么写：< type="text/java"> document.write('<meta content="target-densitydpi=device-dpi,width=640,initial-scale='+window.screen.width/640+',maximum-scale='+window.screen.width/640+'" name="viewport">')</>亲测这样在大部分的安卓手机浏览器和苹果浏览器中是没毛病的；部分低版本的安卓浏览器对于window.screen.width的获取是有问题的所以会不适应；因为我们一般说浏览器的的尺寸实际上是有两个概念的，一个是浏览器的物理尺寸，也就是我们屏幕实实在在的宽高可以测量的；还有一个就是分辨率尺寸比如1920*1080；高版本安卓浏览器获取到的window.screen.width是物理尺寸；而低版本安卓浏览器获取到的是分辨率尺寸。

郑重声明：此文内容为本网站转载企业宣传资讯，目的在于传播更多信息，与本站立场无关。仅供读者参考，并请自行核实相关内容。