移动web终端 viewport设置

96
iceman_dev
2016.10.28 16:53* 字数 506

移动web,顾名思义就是在移动端的web页面,比如我们可以在手机的UC浏览器中访问淘宝等网站:

淘宝移动web版.png

可以发现淘宝的移动web版本和pc上web版本有很大的不同,在移动web版本中更像是模拟了native应用中的页面。所以移动web的开发和pc上web的开发肯定也是有很大的不同。

先看正常的pc上web页面在移动设备上的展示:

正常PC网页在PC上显示.png

从上图可以看出,正常PC上的网页在移动设备被缩放了,这样对于商城购物类的网站来说,用户体验非常差,所以就更应该要有适配移动设备的页面了。

那么究竟是怎样适配移动端的页面呢?答案就是viewport,可以将viewport理解为浏览器中用来承载网页的那一层。默认情况下移动设备上浏览器会自动将viewport的值设置为980px或者1024px,不过手机的屏幕没有那么大,这时候网页就缩放了。

到这里,web适配移动设备的方案就出来,让viewport=手机的宽度就好了。是的,正常情况下都是这么用的:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

在meta标签中设置viewport的宽度为设备的宽度,initial-scale=1的意思是页面的缩放比例为1,user-scalable=no的意思是禁止用户缩放页面,minimum-scale=1,maximum-scale=1的意思是设置用户的最大最小缩放比,当设置了user-scalable=no之后这两个属性值就没有意义了。

以上就是viewport的主流设置,不错淘宝(m.taobao.com)就是非主流的设置,淘宝的移动web页面中viewport没有设置宽度:

淘宝移动web页面的viewport设置.png

所以淘宝的viewport的width应该是用js动态获取的。

前端学习
Web note ad 1