根据项目需求，针对个人开发的官网项目做适配功能；
一：需求：
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 标签）来进行布局视口的设置。
默认写法
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
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的值；
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();
如有更好的方法还望各位大佬留言告知。
