码迷,mamicode.com
首页 > 移动开发 > 详细

移动端兼容小计

时间:2019-05-21 13:15:12      阅读:154      评论:0      收藏:0      [点我收藏+]

标签:点击   data-   asc   base   tap   touch   min   地址   type   

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(); 

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

 

移动端兼容小计

标签:点击   data-   asc   base   tap   touch   min   地址   type   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!