h5兼容css处理

安卓浏览器看背景图片，有些设备会模糊。 
用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 
经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100100，背景图必须得200200，然后background-size:contain;，这样显示出来的图片就比较清晰了。 
代码如下： 
background:url(../images/icon/all.png) no-repeat center center; 
-webkit-background-size:50px 50px; 
background-size: 50px 50px;display:inline-block; width:100%; height:50px; 
或者指定 background-size:contain;

 

禁止复制、选中文本

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

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

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

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

圆角bug 
某些Android手机圆角失效 
background-clip: padding-box; 

启动画面 
<link rel="apple-touch-startup-image" href="start.png"/> 
iOS下页面启动加载时显示的画面图片，避免加载时的白屏。可以通过madia来指定不同的大小：

<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
<!-- iPhone Retina -->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
<!-- iPad portrait -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
<!-- iPad landscape -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
<!-- iPad Retina portrait -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad Retina landscape -->
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

去除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 按钮样式会被默认样式覆盖 

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

IOS键盘字母输入，默认首字母大写 
解决方案，设置如下属性

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

select 下拉选择设置右对齐 
设置如下：

select option {
direction: rtl;
}

通过transform进行skew变形，rotate旋转会造成出现锯齿现象可以设置如下：

-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
transform: rotate(-4deg) skew(10deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0)

消除 IE10 里面的那个叉号 

 
input:-ms-clear{display:none;} 

关于 iOS 与 OS X 端字体的优化(横竖屏会出现字体加粗不一致等) 
iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。 
-webkit-text-size-adjust: 100%; 
-ms-text-size-adjust: 100%; 
text-size-adjust: 100%; 

 

移动端 HTML5 input date 不支持 placeholder 问题 
这个我感觉没有什么好的解决方案，用如下方法

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')"  id="date">

有的浏览器可能要点击两遍！ 

 

部分机型存在type为search的input，自带close按钮样式修改方法 
有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为

#Search::-webkit-search-cancel-button{
display: none;
}

如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。

唤起select的option展开

//zepto方式:
$(sltElement).trrgger("mousedown");
//原生js方式:
function showDropdown(sltElement) {
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
sltElement.dispatchEvent(event);
};

手机上的flex布局时会有兼容性问题，只用新版本的会出现安卓手机不识别的现象

flex布局对于低版本的安卓，不支持flex-wrap:wrap属性，但是ios系统支持换行属性，这个时候如何解决呢？当然是不使用换行，用其他方式代替。

.box{
    display: -webkit-box; 
    /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

input 的placeholder属性会使文本位置偏上

line-height: （和input框的高度一样高）---pc端解决方法
line-height：normal ---移动端解决方法

input type=number之后，pc端出现上下箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

iOS下取消input在输入的时候英文首字母的默认大写

<input type="text" autocapitalize="none">