Html5移動端ios/Android兼容性的示例分析

這篇文章將為大家詳細講解有關Html5移動端ios/Android兼容性的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

先說一下viewport

先上模板

<meta charset="utf-8">
<!--主要I是強制讓文檔的寬度與設備寬度保持1:1，最大寬度1.0，禁止屏幕縮放。-->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<!--這個也是iphone私有標簽，允許全屏瀏覽。-->
<meta content="yes" name="apple-mobile-web-app-capable">
<!--iphone的私有標簽，iphone頂端狀態條的樣式。-->
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<!--禁止數字自動識別為電話號碼，這個比較有用，因為一串數字在iphone上會顯示成藍色，樣式加成別的顏色也是不生效的。-->
<meta content="telephone=no" name="format-detection">
<!--禁止email識別-->
<meta content="email=no" name="format-detection">

寫背景圖時最好加上top left 或者0 0 不然寫運動效果時容易出現跳

禁止復制、選中文本

.el {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

蘋果手機固定定位有bug 檢查html和body是不是設置了overflow-x:hidden;

給不同屏幕大小的手機設置特殊樣式

@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){}

IOS中input鍵盤事件keyup、keydown、keypress支持不是很好, 用input監聽鍵盤keyup事件，在安卓手機瀏覽器中是可以的，但是在ios手機瀏覽器中用輸入法輸入之后，并未立刻相應keyup事件，只有在通過刪除之后才可以響應

方法：可以用html5的oninput事件去代替keyup

<input type="text" id="testInput">
<script type="text/javascript">
  document.getElementById('input').addEventListener('input', function(e){
    var value = e.target.value;
  });
</script>

ios 設置input 按鈕樣式會被默認樣式覆蓋

解決方式如下：

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

• 消除 IE10 里面的那個叉號:input:-ms-clear{display:none;}

• 手機上的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;
}

實現android和ios系統手機打開相機并可選擇相冊功能

<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/>

$(function () {
    //獲取瀏覽器的userAgent,并轉化為小寫
    var ua = navigator.userAgent.toLowerCase();
    //判斷是否是蘋果手機，是則是true
    var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
    if (isIos) {
        $("input:file").removeAttr("capture");
    };
})

關于“Html5移動端ios/Android兼容性的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。