移动web,顾名思义就是在移动端的web页面,比如我们可以在手机的UC浏览器中访问淘宝等网站:
可以发现淘宝的移动web版本和pc上web版本有很大的不同,在移动web版本中更像是模拟了native应用中的页面。所以移动web的开发和pc上web的开发肯定也是有很大的不同。
先看正常的pc上web页面在移动设备上的展示:
从上图可以看出,正常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没有设置宽度:
所以淘宝的viewport的width应该是用js动态获取的。