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" οnfοcus="(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">