关于移动端的viewport

原创 老马 随笔 移动端 328阅读 2017-05-05 10:40:57 举报

关于这段代码想必大部分做移动端开发的人员都清楚:
<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;所以在做移动端开发时我不会去设置这三个值;如果非要设置可以这么写:
<script type="text/javascript">
document.write('<meta content="target-densitydpi=device-dpi,width=640,initial-scale='+window.screen.width/640+',maximum-scale='+window.screen.width/640+'" name="viewport">')
</script>
亲测这样在大部分的安卓手机浏览器和苹果浏览器中是没毛病的;部分低版本的安卓浏览器对于window.screen.width的获取是有问题的所以会不适应;因为我们一般说浏览器的的尺寸实际上是有两个概念的,一个是浏览器的物理尺寸,也就是我们屏幕实实在在的宽高可以测量的;还有一个就是分辨率尺寸比如1920*1080;高版本安卓浏览器获取到的window.screen.width是物理尺寸;而低版本安卓浏览器获取到的是分辨率尺寸。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复