页面布局 利用meta标签对viewport进行控制

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

一：需求：

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：使用

ipad尺寸

2：遇到的问题：

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

手机版样式被拉伸

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

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

function is_iPad() {

        let metas = document.getElementsByTagName('meta')[1];

        console.log('metas数据', metas)

        let ua = navigator.userAgent.toLowerCase();

        console.log('iPad设备', ua.match(/iPad/i))

        if (ua.match(/iPad/i)[0] == "ipad") {

            metas.setAttribute('content', 'width=device-width,initial-scale=0.6,maximum-scale=1.0')

          }

      }

      is_iPad();

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