移動web問題整理

時間 2019-11-06

標籤移動 web 問題整理欄目無線简体版

原文原文鏈接

meta 基礎知識

<!-- H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<!-- 忽略將頁面中的數字識別爲電話號碼 -->
<meta name="format-detection" content="telephone=no" />
<!-- 忽略Android平臺中對郵箱地址的識別 -->
<meta name="format-detection" content="email=no" />
<!-- 將網站添加到主屏幕快速啓動方式，僅針對ios的safari頂端狀態條的樣式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可選default、black、black-translucent -->
複製代碼

viewport模板

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <title>標題</title>
    <link rel="stylesheet" href="index.css" />
  </head>

  <body>
    這裏開始內容
  </body>
</html>
複製代碼

CSS常見問題

移動端如何定義字體font-family

中文字體使用系統默認便可，英文用Helveticajavascript

body{font-family:Helvetica;}
複製代碼

ios系統中元素被觸摸時產生的半透明灰色遮罩怎麼去掉

ios用戶點擊一個連接，會出現一個半透明灰色遮罩, 若是想要禁用，可設置-webkit-tap-highlight-color的alpha值爲0，也就是屬性值的最後一位設置爲0就能夠去除半透明灰色遮罩css

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
複製代碼

部分android系統中元素被點擊時產生的邊框怎麼去掉

android用戶點擊一個連接，會出現一個邊框或者半透明灰色遮罩, 不一樣生產商定義出來額效果不同，可設置-webkit-tap-highlight-color的alpha值爲0去除部分機器自帶的效果html

a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only; 
}
複製代碼

-webkit-user-modify有個反作用，就是輸入法再也不可以輸入多個字符java

另外，有些機型去除不了，如小米2android

對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤ios

webkit表單元素的默認外觀怎麼重置

.css{-webkit-appearance:none;}
複製代碼

僞元素改變number類型input框的默認樣式git

input[type=number]::-webkit-textfield-decoration-container {
    background-color: transparent;    
}
input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
}
複製代碼

webkit表單輸入框placeholder的顏色值能改變麼

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
複製代碼

IE10 表單元素默認外觀如何重置

禁用 select 默認下拉箭頭 ::-ms-expand 適用於表單選擇控件下拉箭頭的修改，有多個屬性值，設置它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。github

select::-ms-expand {
display: none;
}
複製代碼

禁用 radio 和 checkbox 默認樣式 ::-ms-check適用於表單複選框或單選按鈕默認圖標的修改，一樣有多個屬性值，設置它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。web

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
display: none;
}
複製代碼

禁用PC端表單輸入框默認清除按鈕 當表單文本輸入框輸入內容後會顯示文本清除按鈕，::-ms-clear 適用於該清除按鈕的修改，一樣設置使它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。api

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{
display: none;
}
複製代碼

禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片

.css{-webkit-touch-callout: none}
複製代碼

禁止微信瀏覽器圖片長按出現菜單

img{
    pointer-events:none;
    -webkit-pointer-events:none;
}
複製代碼

禁止微信瀏覽器長按「顯示在瀏覽器打開」

document.oncontextmenu = function(e){
      e.preventDefault();
}
複製代碼

禁止ios和android用戶選中文字

.css{-webkit-user-select:none;user-select: none;}

複製代碼

其它問題

打電話發短信寫郵件怎麼實現

<a href="tel:0755-10086">打電話給:0755-10086</a>
<a href="sms:10086">發短信給: 10086</a>
<a href="mailto:xxx@foxmail.com">xxx@foxmail.com</a>
複製代碼

audio元素和video元素在ios和andriod中沒法自動播放

$('html').one('touchstart',function(){
    audio.play()
})
複製代碼

微信瀏覽器用戶調整字體大小後頁面矬了，怎麼阻止用戶調整

緣由: android側是複寫了layoutinflater 對textview作了統一處理 ios側是修改了body.style.webkitTextSizeAdjust值

解決方案： android使用如下代碼，該接口只在微信瀏覽器下有效(感謝jationhuang同窗提供)

/** * 頁面加入這段代碼可以使Android機器頁面再也不受到用戶字體縮放強制改變大小 * 可是會有一個1秒左右的延遲，期間能夠考慮經過loading展現 * 僅供參考 */
(function(){
  if (typeof(WeixinJSBridge) == "undefined") {
    document.addEventListener("WeixinJSBridgeReady", function (e) {
      setTimeout(function(){
        WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
          alert(JSON.stringify(res));
        });
      },0);
    });
} else {
    setTimeout(function(){
      WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
        alert(JSON.stringify(res));
      });
    },0);
  }
})();
複製代碼

ios使用-webkit-text-size-adjust禁止調整字體大小

body{-webkit-text-size-adjust: 100%!important;}
複製代碼

最好的解決方案：rem佈局

取消input在ios下，輸入的時候英文首字母的默認大寫

<input autocapitalize="off" autocorrect="off" />
複製代碼

android 上去掉語音輸入按鈕

input::-webkit-input-speech-button {display: none}
複製代碼

播放視頻不全屏

<!-- 1.目前只有ios7+、winphone8+支持自動播放 2.支持Airplay的設備（如：音箱、Apple TV)播放 x-webkit-airplay="true" 3.播放視頻不全屏，ios七、、winphone8+支持，部分android4+支持（含華爲、小米、魅族） webkit-playsinline="true" 4.ios 10 : playsinline 5.ios 八、9 ：https://github.com/bfred-it/iphone-inline-video -->
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>
<video playsinline preload="auto" autoplay src="http://"></video>
複製代碼

微信瀏覽器禁止頁面上下拉動

//禁止頁面上拉下拉
document.body.addEventListener('touchmove', function (e) {
    e.preventDefault(); //阻止默認的處理方式
}, {passive: false}); //passive 參數不能省略，用來兼容ios和android
複製代碼