移动端兼容问题

1.移动端文件名不要用game等,以防被合作服务器劫持插入广告,从而影响项目运行 2.红米手机,ua返回iphone,需要结合platform判断,但是还不准确,导致需要ios和android区别对待的时候就坑了。 3.是fixed的问题。这个解决办法是尽量不要用,不过ios7及以下才会出现这个问题。某些情况下红米也会有这个问题。 4.如果你想要使用css3的动画,那么一定要变着方式使用3d gpu加速的方式,不要试着left,height,width这样的元素进行变换了,android4.4以下版本卡死你。 5.ios全线点击会有300毫秒延迟,使用fastclick解决。这个插件最良心了。 6.web app像素眼设计会纠结你1px边框问题可以用1px尺寸的带背景色元素然后scaleX(0.5)或scaleY(0.5)实现0.5px效果。(更多解决办法:http://www.zhihu.com/question/28870528;https://xinranliu.me/2015-05-09-1px-in-retina/)
比如要实现一个元素的下边框1px效果:demo:jsbin.com/tijiro/1/ .item {
position: relative;
}
.item:after {
content: '';
display: block;
position: absolute;
width: 100%;
left: 0;
bottom: 0;
height: 1px;
background-color: #c8c7cc;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}

8.meta功能要用好,禁止缩放,缩放比例,屏蔽电话号码等功能很实用。
9.如果想要像手机淘宝那样的各个平台看起来展示效果一致,那么就使用rem来做单位:但是要注意初始font-size的基准值调整,用font-size:62.5%有时会出问题
10.-webkit-tap-highlight-color可以取消点击高亮。
11.localStorage在浏览器开启无痕模式下ios会抛异常,导致js中断。
12.一些情况下对非可点击元素监听click事件,ios下不会触发,css增加cursor:pointer就搞定了。当然想要干脆静止点击就是not-allowed。
13.android4.4以下版本,设置圆角属性需要在直接元素上,向父元素设置圆角并且指定overflow:hidden是不会生效的。
14.微信浏览器中有的输入法的emoji输入后在输入框中显示为空
15.点击穿透 click
16.iOS(safari)有时候某个标签绑定点击事件无效,加了空的onclick=""就好了,如:
17.Android微信内置webview对meta viewport的支持有缺陷,当user-scalable=no时,设定width为固定数值(例如640)不会自动缩放,需要用js做一些处理(新版微信已经修正了这个问题)
18.Android调用重力传感器返回的数据和iOS和Windows Phone上的是相反的19.iPhone5以上各种应用的webview(例如微信)在遇到有大量图片的页面时会出现图片乱套的情况,6和6plus更为严重,具体表现为各种img和background-image互相错乱,困扰了我们好久,简直是大坑,目前研究出暂时的解决方法是动态给所有用到图片的元素加上-webkit-transform : translate3d(0,0,0)进行强制重绘,测试结果对于绝大部分出现问题的机子有效,但仍然有小部分机器还是会出问题,另一种方法是进行懒加载,但是这会降低开发效率,并且对使用background-image的元素比较难实现
20.safari(包括OS X、iOS和Windows版)对transform-origin的Z轴判定和其它所有浏览器都不同,设置transform-origin的Z轴会直接产生translateZ的变换,十分不理解,暂无纯css解法
21.Android的各种浏览器都不支持同时播放多个音频,并且通过js连续播放几个音频的时候会出现一些问题
22.图片大小最好是标注的2倍,这样可以保证在各类机型上的清晰
23.小图片最好拼合起来做成雪碧图,然后可以在TinyPNG – Compress PNG images while preserving transparency网站上压缩后再Base64嵌入html或css中。移动端要尽可能减少请求。不过太大的图片就不要base64了,性能会下降。一般以10k为界。
24.rem方案相当复杂,存在非常多的兼容问题,以至于阿里这边还专门有一个Flexible库来解决这一系列问题。但是兼容性问题解决后开发会变得非常畅快。
25.border-radius不要随便乱用,在很多安卓机型上都会出现锯齿,非常丑
26.图片比较多的页面务必要做懒加载(也就是滚动到图片的时候才加载)
27.相对于底部绝对定位的按钮被键盘顶起来,用js定高
this.clientHeight = document.documentElement.clientHeight;
$('body').height(this.clientHeight);28.做点击跳转,长按删除功能的时候坑比较多:(1)组合使用touchstart,touchmove,touchend,click事件;(2)部分机型按到文字会弹出选择,复制的选项,使用 onselectstart="return false;" 禁掉;-- 之后才知道有很多移动端事件处理库可以用,如 Hammer.JS - Hammer.js 29.IOS下和安卓对json对象的遍历顺序相反,如
var obj = {x: 1,y: 2},
str = '',
temp = '',
i = 0;
for(var item in obj){
temp = i === 0 ? '' : '&';
i++;
str += temp + item + '=' + obj[item];
}
console.log(str);
安卓下输出
x=1&y=2
IOS下
y=2&x=130.微信 iOS 版 整页切换到 动态生成的表单,其提交按钮会自动点击,导致空白表单提交 —— 自己给 iOS WebKit 补上砍掉的 HTML 5 表单元素验证方法,提交前先验证 HTML 代码中的 required、pattern 属性,否则阻止提交事件
31.Android点击按钮什么的时候,总是出现一个焦点的光标在页面上,添加css后就解决了
body {
-webkit-user-select: none;
}

相关内容推荐