移动端HTML+CSS设置

html5调用安卓或者ios的拨号功能

<a href="tel:10010">10010</a>

禁止复制、选中文本

Element {
 -webkit-user-select: none;
 -moz-user-select: none;
 -khtml-user-select: none;
  user-select: none;
}

iphone及ipad下输入框默认内阴影

Element{
 -webkit-appearance: none;
}

ios和android下触摸元素时出现半透明灰色遮罩

Element{
 -webkit-tap-highlight-color:rgba(255,255,255,0);
}

动画定义3D启用硬件加速

Element{
 -webkit-transform:translate3d(0, 0, 0)
 transform: translate3d(0, 0, 0);
}

某些Android手机圆角失效

Element{
 background-clip: padding-box;
}

桌面图标

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />

h5网站input 设置为type=number的问题

• maxlength属性不好用

<input type="number" oninput="checkTextLength(this ,10)">
function checkTextLength(obj, length) {
     if(obj.value.length > length)  {    
       obj.value = obj.value.substr(0, length);
     }
}

• form提交的时候，默认给取整了 是因为form提交默认做了表单验证，step默认是1,要设置step属性，假如保留2位小数，写法如下：(nput 中type=number，一般会自动生成一个上下箭头，点击上箭头默认增加一个step，点击下箭头默认会减少一个step。number中默认step是1。也就是step=0.01,可以允许输入2位小数，并且点击上下箭头分别增加0.01和减少0.01。)

<input type="number" step="0.01" />

• 部分安卓手机出现样式问题 去除input默认样式

input[type=number] {
 -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
 -webkit-appearance: none;
 margin: 0;
}

IOS键盘字母输入，默认首字母大写

<input type="text" autocapitalize="off" />

iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格

this.value = this.value.replace(/\u2006/g, '');

IOS键盘字母输入，默认首字母大写

<input type="text" autocapitalize="off" />

IOS键盘字母输入，默认首字母大写

<input type="text" autocapitalize="off" />

IOS键盘字母输入，默认首字母大写

<input type="text" autocapitalize="off" />

IOS键盘字母输入，默认首字母大写

<input type="text" autocapitalize="off" />

IOS键盘字母输入，默认首字母大写

<input type="text" autocapitalize="off" />

IOS键盘字母输入，默认首字母大写

<input type="text" autocapitalize="off" />