移动端兼容小计

1、页面布局：

由于手机型号多样导致页面高宽比非常多，在制作上会有出现不同手机在同一套css下面显示效果不尽如人意，所以需要进行兼容性处理。

方式很多比如直接套用类似bootstrap类的框架，可以使用rem等相对单位。这里我主要使用的是媒体查询和vw和vh单位和百分比来进行处理。

100vw为整个屏幕的宽度，100vh为屏幕高度，其实和百分比的做法很相似，只不过把计算的值单位换成vw或者vh。

2、碰到的兼容问题，主要是ios：

a、ios: optgroup使用会出现select的选择文本靠左无法修改，同时在optgroup上的class等选择器无法进行样式修改，最好不用

b、ios：overflow：scroll 的盒子滑动不畅，在css添加 -webkit-overflow-scrolling: touch;  详情可以看这个链接了解：https://www.cnblogs.com/xiahj/p/8036419.html

c、当你点击ios的可点击元素时会出现一个半透明的背景，可以设置-webkit-tap-highlight-color: rgba(0, 0, 0, 0);来去除。

d、a,button等可点击标签最好加上cursor：pointer；属性，ios可能无法点击。

e、不要写es6的语法，低版本的手机无法编译，会报错

f、canvas画图：使用的是html2canvas，做了一个将几个页面元素合并利用canvas画成一张图片长按保存图片的效果，本地图片可以正常画图。

由于ios的安全问题，线上正常的图片地址是没有办法画图成功的，尝试过把线上的图片链接通过canvas.toDataURL(‘图片类型‘)在本地先转成base64链接在进行画图，但是ios由于安全问题无法使用toDataURL方法，所以失败了。

最后是让后端人员先把图片地址转成base64再返回给前端，这样是可以画图成功的。另外如果是背景图的话会模糊，所以请使用<img>。

可参考文章：https://www.jianshu.com/p/22bd5b98e38a

使用方式：

html:
    <p class="share-notice" data-html2canvas-ignore>长按保存图片，邀请好友来点赞</p> //data-html2canvas-ignore 如果有某个元素是你希望不被绘图的那么加上这个属性就好了

js：
    <script type="text/javascript"     src="/v2/js/base/html2canvas.min.js"></script>
    html2canvas(document.getElementById(‘share-page‘), { //要绘制canvas的选择器
        allowTaint: true, //
        backgroundColor: null //在生成canvas时底部多了一条线 这个设置成null解决了
    }).then(function(canvas) {
        var url = canvas.toDataURL()
        $(‘.canvas-img‘).attr(‘src‘, url)
    })

g、摇一摇，声音播放：

3、调试使用：vconsole cdn：https://www.bootcdn.cn/vConsole/

在页面引入：<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>

在使用的页面：var vConsole = new VConsole();

这样就可以在手机上看到调试信息了

原文地址：https://www.cnblogs.com/muzs/p/10899034.html