移动web终端 viewport设置

Posted 2023-02-23

参考技术A 移动web，顾名思义就是在移动端的web页面，比如我们可以在手机的UC浏览器中访问淘宝等网站：

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

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

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

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

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

在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动态获取的。