移動端瀏覽器問題

kimingw發表於2018-01-29
瀏覽器

1、防止手機中網頁放大和縮小

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

2、啟動或禁用自動識別頁面中的電話號碼

<meta name="format-detection" content="telephone=no">

3、html5呼叫安卓或者ios的撥號功能

<a href="tel:4008106999,1034">400-810-6999 轉 1034</a>

4、上下拉動滾動條時卡頓、慢

body {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

5、禁止複製、選中文字

Element {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

6、長時間按住頁面出現閃退

element {
  -webkit-touch-callout: none;
}

7、iphone及ipad下輸入框預設內陰影

Element{
  -webkit-appearance: none; 
}

8、ios和android下觸控元素時出現半透明灰色遮罩

Element {
  -webkit-tap-highlight-color:rgba(255,255,255,0)
}

9、active相容處理 即 偽類 :active 失效

方法一：body新增ontouchstart
<body ontouchstart="">
方法二：js給 document 繫結 touchstart 或 touchend 事件
<style>
a {
 color: #000;
}
a:active {
 color: #fff;
}
</style>
<a herf=foo >bar</a>
<script>
 document.addEventListener('touchstart',function(){},false);
</script>

10、旋轉螢幕時，字型大小調整的問題

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
  -webkit-text-size-adjust:100%;
}

11、某些Android手機圓角失效

background-clip: padding-box;

12、頂部狀態列背景色

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

13、取消快取

<meta http-equiv="Cache-Control" content="no-cache" />

14、啟動畫面

<link rel="apple-touch-startup-image" href="start.png"/>
不同尺寸
<!--iPhone-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
<!-- iPhone Retina -->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
<!-- iPad portrait -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
<!-- iPad landscape -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
<!-- iPad Retina portrait -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad Retina landscape -->
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

15、特殊瀏覽器私有

QQ瀏覽器私有
全屏模式
<meta name="x5-fullscreen" content="true">
強制豎屏
<meta name="x5-orientation" content="portrait">
強制橫屏
<meta name="x5-orientation" content="landscape">
應用模式
<meta name="x5-page-mode" content="app">

UC瀏覽器私有
全屏模式
<meta name="full-screen" content="yes">
強制豎屏
<meta name="screen-orientation" content="portrait">
強制橫屏
<meta name="screen-orientation" content="landscape">
應用模式
<meta name="browsermode" content="application">

其它
針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓
<meta name="HandheldFriendly" content="true">
微軟的老式瀏覽器
<meta name="MobileOptimized" content="320">
windows phone 點選無高光
<meta name="msapplication-tap-highlight" content="no">

16、 IOS中input鍵盤事件keyup、keydown、keypress支援不是很好

可以用html5的oninput事件去代替keyup

<input type="text" id="testInput">
<script type="text/javascript">
  document.getElementById('testInput').addEventListener('input', function(e){
    var value = e.target.value;
  });
</script>

17、IOS鍵盤字母輸入，預設首字母大寫

<input type="text" autocapitalize="off" />

18、移動端點選300ms延遲

fastclick、tap.js、zepto、touchstart

19、移動端 HTML5 audio autoplay 失效問題

document.addEventListener('touchstart', function () {
  document.getElementsByTagName('audio')[0].play();
  document.getElementsByTagName('audio')[0].pause();
});

20、去除input預設樣式

input[type=number] {
  -moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

　　

相關文章