在移动端开发中，容易遇到的问题集合。

1、禁止IOS，Android长按下载图片

.css { -webkit-touch-callout : none; }

2、禁止IOS，Android用户选中文字

 .css { -webkit-user-select : none;  }

3、① IOS中input [ type =’button’] 显示的不是自己设置的样式，而是IOS默认样式；② 移动端IOS手机下清除输入框内阴影

input [ type='button'] { -webkit-appearance : none ; }

4，input获取焦点时，禁止键盘弹出

 $('input').on('focus',function(){    document.activeElement.blur(); })

5，IOS或者说IPhone中，滑动不流畅 || 卡顿现象解决：

 .css { -webkit-overflow-scrolling : touch; }

6，

 input,textarea {   -webkit-appearance: none;}

7，webkit表单输入框placeholder的颜色值改变

input::-webkit-input-placeholder{color:red;} //如果想要默认的颜色显示红色input:focus::-webkit-input-placeholder{color:blue;} //如果想要用户点击变为蓝色

8，IOS.android系统中，点击数字拨打电话

<a href="tel:4008006666">打电话给:4008006666a>

9，a,button,input,optgroup,select,textarea 等标签点击的时候背景变暗

element {    -webkit-tap-highlight-color: rgba(0,0,0,0);//transparent}

10，设置状态栏的背景颜色（IOS）: 设置状态栏的背景颜色，只有在 “apple-mobile-web-app-capable” content=”yes” 时生效

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

content 参数； default ：状态栏背景是白色。black ：状态栏背景是黑色。
black-translucent ：状态栏背景是半透明。如果设置为 default 或 black ,网页内容从状态栏底部开始。如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

11，手机拍照和上传图片

type="file">的accept 属性

<input type=file accept="image/*">

<input type=file accept="video/*">

使用总结：

ios 有拍照、录像、选取本地图片功能
部分android只有选取本地图片功能
winphone不支持
input控件默认外观丑陋

12，消除transition闪屏

.css{    -webkit-transform-style: preserve-3d;    -webkit-backface-visibility: hidden;}

开启硬件加速
解决页面闪白
保证动画流畅

.css {   -webkit-transform: translate3d(0, 0, 0);   -moz-transform: translate3d(0, 0, 0);   -ms-transform: translate3d(0, 0, 0);   transform: translate3d(0, 0, 0);}

设计高性能CSS3动画的几个要素
尽可能地使用合成属性transform和opacity来设计CSS3动画，
不使用position的left和top来定位
利用translate3D开启GPU加速

暂时遇到这些小问题，但是很有可能遇到的，随着开发再更新。

更多相关文章

随机推荐