移动web终端 viewport设置

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

根据项目需求，针对个人开发的官网项目做适配功能；

一：需求：

1：手机端  ---用H5手机版样式，

2：pc端---用pc版样式；

3：ipad端---用pc版 样式，需求是ipad 768px——1024px的设备尺寸 要适配pc版样式；

解决的问题：如何将pc版的样式等比适配到ipad上？

二： 理解viewport：https://www.cnblogs.com/yuduxyz/p/9745962.html

1: 我们可以使用视口元标签（viewport meta 标签）来进行布局视口的设置。

默认写法

2:下面是每个属性的详细说明：

3:注意

* viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的

*单独设置 initial-scale 或 width 都会有兼容性问题，所以设置布局视口为理想

  视口的最佳方法是同时设置这两个属性

*即使设置了 user-scalable = no，在 Android Chrome 浏览器中也可以强制启

用手动缩放

三：针对我们项目的特殊性  ipad要适配pc版样式，所以我通过 initial-scale=0.6 初始将布局适口缩放0.6，可以实现效果；

1：使用 <meta name="viewport" content="width=device-width,initial-scale=0.6,maximum-scale=1.0">

2：遇到的问题：

  viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的，所以手机版的样式也被缩放了0.6，手机版的样式整体被拉伸了！

3：如何处理这个问题呢？试了一下监听浏览器设备来动态的改变initial-scale=0.6的值；

*在App.vue中 监听浏览器设备如果是ipad设备，就动态改变initial-scale=0.6的值；

如有更好的方法还望各位大佬留言告知。

---