移動(dòng)端常見的兼容性問題

1. meta 基礎(chǔ)知識(shí)點(diǎn)如下
// 啟動(dòng)或禁用自動(dòng)識(shí)別頁面中的電話號(hào)碼
<meta name="format-detection" content="telephone=no" />

// 啟動(dòng)或禁用自動(dòng)識(shí)別郵箱地址
<meta name="format-detection"  content="email=no" /> 

// 設(shè)置 Web 應(yīng)用是否以全屏模式運(yùn)行。
<meta name="apple-mobile-web-app-capable" content="yes">

// ios 的 safari 頂端狀態(tài)條的樣式，可選的參數(shù)有：default、black、black-translucent
<meta name="apple-mobile-web-app-status-bar-style"  content="black" />

// winphone 系統(tǒng) a、input 標(biāo)簽被點(diǎn)擊時(shí)產(chǎn)生的半透明灰色背景怎么去掉
<meta name="msapplication-tap-highlight"  content="no">
2. input 基礎(chǔ)知識(shí)點(diǎn)如下
// input 輸入框不可編輯
<input type="text" name="name" value="xxx" disabled="true"/>
<input type="text" name="name" value="xxx" readonly="true"/>
/* disabled 文本框變灰，通過request.getParameter("name")得不到文本框中的內(nèi)容
readonly 只是使文本框不能輸入，樣式?jīng)]有變化，通過request.getParameter("name")可以得到內(nèi)容 */

// ios 輸入的時(shí)候英文首字母的默認(rèn)大寫
<input autocapitalize="off" autocorrect="off" />

// android 上去掉語音輸入按鈕
input::-webkit-input-speech-button {
  display: none
}

// ios系統(tǒng)中元素被觸摸時(shí)產(chǎn)生的半透明灰色遮罩怎么去掉
a,button,input,textarea{
  -webkit-tap-highlight-color: rgba(0,0,0,0;)
  -webkit-user-modify:read-write-plaintext-only;
} 
/* -webkit-user-modify 這個(gè)屬性使用需謹(jǐn)慎，副作用就是輸入法不再能夠輸入多個(gè)字符
另外，有些機(jī)型去除不了，如小米2
對(duì)于按鈕類，不使用a或者input標(biāo)簽，直接用div標(biāo)簽 */

// 表單元素的默認(rèn)外觀重置
  -webkit-appearance:none;

// 修改表單輸入框 placeholder 的顏色值
  input::-webkit-input-placeholder{color:#ccc;} 
  input:focus::-webkit-input-placeholder{color:#eee;} 
// 注意 placeholder,  ios 可以換行，android 不可以

// 禁用 select 默認(rèn)下拉箭頭
select::-ms-expand {display: none;} 

// 禁用 radio 和 checkbox 默認(rèn)樣式
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { 
  display: none; 
}

// 禁用 PC 端表單輸入框默認(rèn)清除按鈕
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { 
  display: none; 
}
3. 部分安裝手機(jī) a 標(biāo)簽用作按鈕的時(shí)候，頁面顯示空白

解決辦法：用 button 標(biāo)簽替換 a 標(biāo)簽

4. 微信禁止、選中文本
body {
  -webkit-user-select: none;
}
5. 禁止 ios 長(zhǎng)按時(shí)不觸發(fā)系統(tǒng)的菜單，禁止 ios&android 長(zhǎng)按時(shí)下載圖片
.css {
  -webkit-touch-callout: none
}
6. 移動(dòng)端字體單位的選擇 font-size 選擇 px 還是rem

解決辦法：

  • 需要適配手機(jī)設(shè)備，使用 px 即可
  • 需要適配各種移動(dòng)設(shè)備，使用 rem，例如需要適配 iPhone 和iPad等分辨率差別比較挺大的設(shè)備，我們就選擇 rem
7. 移動(dòng)端 click 事件，使屏幕產(chǎn)生 200-300ms 的延遲響應(yīng)

解決辦法：

  1. 使用 fastclick.js
  2. zepto.js 里面的 tap 事件也可以解決 click 的延遲問題
8. 大屏幕中，圖片有時(shí)候會(huì)變模糊

解決辦法：用背景圖片替換 img 標(biāo)簽，設(shè)計(jì)稿切出來的圖片長(zhǎng)寬保證為偶數(shù)，并使用 backgroud-size把圖片縮小為原來的 1/2；

例如圖片寬高為：100px*100px，那么 css 寫法如下：

.css{
  background:url() no-repeat center center;
  background-size: 50px 50px;
  width:50px; 
  height:50px; 
}
9. 打電話&發(fā)短信&發(fā)郵件的如何實(shí)現(xiàn)
// 打電話
<a href="tel:0755-10086">打電話給:0755-10086</a> 
<a href="tel:4008106999,1034">400-810-6999 轉(zhuǎn) 1034</a>
// 發(fā)短信
<a href="sms:10086">發(fā)短信給: 10086</a> 
// 發(fā)短信 短信內(nèi)容 （本人進(jìn)行測(cè)試，多個(gè)號(hào)碼發(fā)送短信，功能實(shí)現(xiàn)不了，始終給第一個(gè)號(hào)碼發(fā)送）
安卓手機(jī)：<a href="sms:10086?body=內(nèi)容">發(fā)短信給: 10086</a> 
蘋果手機(jī)：<a href="sms:10086&body=內(nèi)容">發(fā)短信給: 10086</a> 
多個(gè)號(hào)碼：<a href="sms:10086,10010&body=內(nèi)容">發(fā)短信給: 10086和10010</a> 
         <a href="sms:10086,10010?body=內(nèi)容">發(fā)短信給: 10086和10010</a> 
// 發(fā)郵件
<a href="mailto:peun@foxmail.com">單擊這里給peun發(fā)電子郵件</a>
// 移動(dòng)web頁面自動(dòng)探測(cè)電話號(hào)碼：
<meta name="format-detection" content="telephone=yes">
// 使用wtai協(xié)議進(jìn)行撥打電話：
<a href="wtai://wp//mc;15110418977">撥打XXX</a> 
<a href="wtai://wp/ap;15110418977;">將XXX存儲(chǔ)至電話簿 </a>
// 在電話號(hào)碼前加上 + （加號(hào)）表示國際號(hào)碼:
<a href="wtai://wp/mc;+15110418977">+15110418977</a>
// 地圖定位GPS：
<a href="geopoint:[經(jīng)度],[緯度]">me位置</a> 比如：<a href="geopoint:200,20">me位置</a>
10. 屏幕旋轉(zhuǎn)的事件和樣式
// 1. 事件
window.orientation，取值：正負(fù)90表示橫屏模式、0和180表現(xiàn)為豎屏模式；
// 代碼判斷
window.onorientationchange = function(){ 
  switch(window.orientation){ 
    case -90: 
    case 90: 
        alert("橫屏:" + window.orientation); 
    case 0: 
    case 180: 
        alert("豎屏:" + window.orientation); 
    break; 
    } 
}

// 2. 樣式
/*豎屏?xí)r使用的樣式*/ 
@media all and (orientation:portrait) {
  .css{} 
}

/*橫屏?xí)r使用的樣式*/ 
@media all and (orientation:landscape) {
  .css{}
}
11. H5 audio 和 video 在 ios 和 andriod 中無法自動(dòng)播放
// 需要手動(dòng)去觸發(fā)事件來播放
$('.div').one('touchstart',function(){ 
  audio.play() 
})
12. 阻止用戶調(diào)整微信瀏覽器字體大小
// ios 管事，android 暫無解決方案
body{
  -webkit-text-size-adjust: 100%!important;
}
13. 解決 transition 閃屏
.css{ 
  /*設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D*/ 
  -webkit-transform-style: preserve-3d; 
  /*（設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對(duì)用戶時(shí)是否可見：隱藏）*/ 
  -webkit-backface-visibility: hidden; 
}
14. @-webkit-keyframes 注意
  • 以0%開始100%結(jié)束，0%的百分號(hào)不能去掉
  • after和before偽類無法使用動(dòng)畫
15. border-radius 注意
  • 不支持%單位
  • 三星 Galaxy S4中自帶瀏覽器不支持 border-radius 縮寫
  • 同時(shí)寫入 border-radius 和背景色的時(shí)候，背景色會(huì)溢出到圓角以外部分
16. active兼容處理 , 有時(shí)候偽類 :active 失效
// 1. body 添加 ontouchstart
<body ontouchstart="">

// 2. js 給 document 綁定 touchstart 或 touchend 事件
// css
a { color:#ccc;}
a:active{ color:#f0f;}

// html
<a herf=''>bar</a>

// js
document.addEventListener('touchstart', function(){}, false);
17. 視頻，音頻獲取播放結(jié)束后的回調(diào)函數(shù)－ended
$('#video').on('ended',function(){
  alert(0);
});
18. ios 視頻默認(rèn)全屏播放，如何阻止全屏播放－ webkit-playsinline
<video id="video" src="" webkit-playsinline poster="" ></video>
18. 前端 iphonex 適配問題
目前有三種方法：
1. 機(jī)型適配
通過判斷 navigator.userAgent 中的字符串 iphone 和 iphoneX 的設(shè)備寬和高
const isIphoneX = () => {
    return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
}

2. 通過媒體查詢，判斷設(shè)備寬高和dpr
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
     background: red;
}
或者
@media only screen and (width: 375px) and (height: 690px){
    body {
        background: red;
    }
}

3. 通過 css3 的 content，設(shè)置 viewport-fit=cover
<meta name="viewport" content="initial-scale=1, viewport-fit=cover">
body {
         background: grey;
           padding-top: constant(safe-area-inset-top);
           padding-left: constant(safe-area-inset-left);
           padding-right: constant(safe-area-inset-right);
           padding-bottom: constant(safe-area-inset-bottom);
       }

為您推薦

http://www.open-open.com/lib/view/open1449325854077.html
https://mp.weixin.qq.com/s/JVUpsz9QHsNV0_7U-3HCMg

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容