以前做pc端，也會遇到兼容性的問題，不過說實話，腦海里全是ie的問題，并沒有什么可特別注意的，可能是我不善總結，現在做移動端（本來覺得移動端很easy，所以沒放在眼里），so，我錯了，我為自己的輕視高傲買單！
最近就遇見了一些兼容性bug，從網上找了資料。
先說一下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;}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"); };})以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
