您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)Html5移動(dòng)端ios/Android兼容性的示例分析,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
先說一下viewport
先上模板
<meta charset="utf-8"> <!--主要I是強(qiáng)制讓文檔的寬度與設(shè)備寬度保持1:1,最大寬度1.0,禁止屏幕縮放。--> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <!--這個(gè)也是iphone私有標(biāo)簽,允許全屏瀏覽。--> <meta content="yes" name="apple-mobile-web-app-capable"> <!--iphone的私有標(biāo)簽,iphone頂端狀態(tài)條的樣式。--> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <!--禁止數(shù)字自動(dòng)識(shí)別為電話號(hào)碼,這個(gè)比較有用,因?yàn)橐淮當(dāng)?shù)字在iphone上會(huì)顯示成藍(lán)色,樣式加成別的顏色也是不生效的。--> <meta content="telephone=no" name="format-detection"> <!--禁止email識(shí)別--> <meta content="email=no" name="format-detection">
寫背景圖時(shí)最好加上top left 或者0 0 不然寫運(yùn)動(dòng)效果時(shí)容易出現(xiàn)跳
禁止復(fù)制、選中文本
.el { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
蘋果手機(jī)固定定位有bug 檢查html和body是不是設(shè)置了overflow-x:hidden;
給不同屏幕大小的手機(jī)設(shè)置特殊樣式
@media only screen and (min-device-width : 320px) and (max-device-width : 375px){}
IOS中input鍵盤事件keyup、keydown、keypress支持不是很好, 用input監(jiān)聽鍵盤keyup事件,在安卓手機(jī)瀏覽器中是可以的,但是在ios手機(jī)瀏覽器中用輸入法輸入之后,并未立刻相應(yīng)keyup事件,只有在通過刪除之后才可以響應(yīng)
方法:可以用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 設(shè)置input 按鈕樣式會(huì)被默認(rèn)樣式覆蓋
解決方式如下:
input,textarea { border: 0; -webkit-appearance: none; }
消除 IE10 里面的那個(gè)叉號(hào):input:-ms-clear{display:none;}
手機(jī)上的flex布局時(shí)會(huì)有兼容性問題,只用新版本的會(huì)出現(xiàn)安卓手機(jī)不識(shí)別的現(xiàn)象
flex布局對(duì)于低版本的安卓,不支持flex-wrap:wrap屬性,但是ios系統(tǒng)支持換行屬性,這個(gè)時(shí)候如何解決呢?當(dāng)然是不使用換行,用其他方式代替。
.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屬性會(huì)使文本位置偏上
line-height: (和input框的高度一樣高)---pc端解決方法
line-height:normal ---移動(dòng)端解決方法
input type=number之后,pc端出現(xiàn)上下箭頭
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; }
實(shí)現(xiàn)android和ios系統(tǒng)手機(jī)打開相機(jī)并可選擇相冊(cè)功能
<input class="js_upFile cover1" type="file" name="cover" accept="image/*" capture="camera" multiple/> $(function () { //獲取瀏覽器的userAgent,并轉(zhuǎn)化為小寫 var ua = navigator.userAgent.toLowerCase(); //判斷是否是蘋果手機(jī),是則是true var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1); if (isIos) { $("input:file").removeAttr("capture"); }; })
關(guān)于“Html5移動(dòng)端ios/Android兼容性的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。