挪动端开辟的兼容题目
文章已同步我的github笔记
https://github.com/ymblog/blog,迎接人人加star~~,加star后人生越发优美……
1、ios下input为type=button属性disabled设置true,会涌现款式笔墨和背景非常题目。
处理方案:运用opacity=1来处理
2、对非可点击元素如(label,span)监听click事宜,部份ios版本下不会触发。
处理方案:css增添cursor:pointer就搞定了
3、挪动端1px边框
处理方案:比方按钮的box的class为btn
.btn:before{
content:'';
position: absolute;
top: 0;
left: 0;
border: 1px solid #ccc;
width: 200%;
height: 200%;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: left top;
transform-origin: left top;
}
4、input为fixed定位,在ios下input牢固定位在顶部或许底部,在页面转动一些间隔后,点击input(弹出键盘),input位置会涌如今中心位置。
处理方案:内容列表框也是fixed定位,如许不会涌现fixed错位的题目
5、挪动端字体小于12px运用周围边框或许背景色块,部份安卓笔墨偏上bug题目。
处理方案:能够运用团体放大屏幕的dpr倍(width、height、font-size等等)再运用transform缩放,运用canvas在挪动端会隐约也须要如许的处理方案
6、在挪动端图片上传图片兼容低端机的题目。
处理方案:input 到场属性 accept=”image/*” multiple
7、在h5嵌入app中,ios假如涌现垂直转动条时,手指滑动页面转动以后,转动很快停下来,彷佛踩着刹车在开车,有“转动很费劲”的觉得。
处理方案:
self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;对webview设置了更低的“减速度”
8、挪动端click 300ms 延时相应
处理方案:运用 Fastclick
window.addEventListener( "load", function() {
FastClick.attach( document.body );
}, false );
9、在安卓机上placeholder笔墨设置行高会偏上
处理方案:input有placeholder情况下不要设置行高
10、overflow:scroll,或许auto在iOS上滑动卡顿的题目
处理方案:到场-webkit-overflow-scrolling:touch;
11、挪动端图片紧缩预览上传的题目,能够参考我的一篇文章https://segmentfault.com/a/11…
12、挪动端适配能够运用lib-flexible https://github.com/amfe/lib-f…,运用rem来规划挪动端有一个题目就是px的小数点的题目,差别的手机关于小数点处理方式不一样,有些是四舍五入,有些直接舍去掉,因此在自动天生雪碧图时刻图标周围恰当留2px的空间,防备图标被裁剪掉
13、iphonex的适配的处理方案
<meta name="viewport" content="...,viewport-fit=cover" />
body{
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
完毕……撒花~~
文章已同步我的github笔记
https://github.com/ymblog/blog,迎接人人加star~~,加star后人生越发优美……
以后有题目会连续更新上去,人人有更多的兼容题目或许以上有题目能够在批评中留言。