> css教程 > css >

常见移动端兼容性问题

来源:网络 文章列表 2019-09-23 8
1、移动端开发需要加入的代码   2、   IOS

1、移动端开发需要加入的代码

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
<meta name="viewport" content="initial-scale=1,  user-scalable=no",maximum-scale=1, minimum-scale=1>

2、

 

IOS端

1、input标签,设置type=button属性,disabled设置true,会出现样式文字和背景异常问题

解决方案:使用opacity=1

2、有时对非可点击元素如(label,span)添加单机监听事件,不会触发

解决方案:修改样式,cursor:pointer

3、使用webview时,页面滚动卡顿

解决方案:对webview设置更低的“减速率”

self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;

 

4.不让 Android 手机识别邮箱
<meta content="email=no" name="format-detection" />

5.禁止 iOS 识别长串数字为电话
<meta content="telephone=no" name="format-detection" />

6.禁止 iOS 弹出各种操作窗口
-webkit-touch-callout:none

7.消除 transition 闪屏
-webkit-transform-style: preserve-3d; /设置内嵌的元素在 3D 空间如何呈现:保留 3D/
-webkit-backface-visibility: hidden; /(设置进行转换的元素的背面在面对用户时是否可见:隐藏)/

8.iOS 系统中文输入法输入英文时,字母之间可能会出现一个六分之一空格可以通过正则去掉
this.value = this.value.replace(/\u2006/g, '');

9.禁止ios和android用户选中文字
-webkit-user-select:none

10.CSS动画页面闪白,动画卡顿
解决方法:
1.尽可能地使用合成属性transform和opacity来设计CSS3动画,不使用position的left和top来定位

2.开启硬件加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

11.fixed定位缺陷
ios下fixed元素容易定位出错,软键盘弹出时,影响fixed元素定位
android下fixed表现要比iOS更好,软键盘弹出时,不会影响fixed元素定位
ios4下不支持position:fixed
解决方案: 可用iScroll插件解决这个问题

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接