移动端开发的兼容问题

一、ios下input设置type=button属性disabled设置true,会出现样式文字和背景异常问题,使用opacity=1来解决css

二、一些状况下对非可点击元素如(label,span)监听click事件,ios下不会触发,css增长cursor:pointer就搞定了ios

三、1px边框问题使用

xx: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;

}git

四、input为fixed定位在ios下的bug问题,点击焦点input,input跳到中间位置,可使用内容滚动框也是fixed来设置github

五、移动端字体小于12px使用四周边框或者背景色块,安卓文字偏上bug问题,可使用总体放大1倍再缩放,并且字体不要是奇数web

六、在移动端图片上传图片 使用accept="image/*" multiple,兼容低端机的问题app

七、在h5嵌入app中,ios若是出现垂直滚动条时,手指滑动页面滚动以后,滚动很快停下来,好像踩着刹车在开车,有“滚动很吃力”的感受self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;对webview设置了更低的“减速率”字体

八、click 300ms 延时响应 使用 Fastclick

window.addEventListener( "load", function() {

FastClick.attach( document.body );

}, false );flex

九、input 有placeholder状况下不要设置行高,不然会偏上spa

十、移动端适配可使用amfe-flexible,postcss-px2rem

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容