以前做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); };})以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。