ios和android 手機各大瀏覽器適配問題總結

問題&解決方案

1.禁止 iOS 彈出各類操做窗口

body, html {

-webkit-touch-callout:none  }

2.禁止 iOS 橫豎屏切換字體放大問題

body, html {      -webkit-text-size-adjust: 100%;

}

3.消除 transition 閃屏

-webkit-transform-style: preserve-3d; /設置內嵌的元素在 3D 空間如何呈現：保留 3D/

-webkit-backface-visibility: hidden; /(設置進行轉換的元素的背面在面對用戶時是否可見：隱藏)/

4.iOS 系統中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格

能夠經過正則去掉 => this.value = this.value.replace(/\u2006/g, '');

5.禁止ios和android用戶選中文字

body, html {

-webkit-user-select:none

}

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

觸發事件調用 => audio.play() 或 video.play()

7.CSS動畫頁面閃白,動畫卡頓

1.儘量地使用合成屬性transform和opacity來設計CSS3動畫，不使用position的left和top來定位

2.開啓硬件加速 -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

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

Element {     -webkit-tap-highlight-color:rgba(255,255,255,0)   }   設置alpha值爲0就能夠去除半透明灰色遮罩，備註：transparent的屬性值在android下無效。

9.圓角bug

某些Android手機圓角失效 解決方案=> background-clip: padding-box;

10.手機端js兼容寫法

例1=> 設置樣式 不兼容寫法:document.getElementById('div').style="height:100px"

兼容寫法:document.getElementById('div').setAttribute('style','height:100px')

例2=> const arr=[1,2,3]

循環不兼容寫法:arr.forEach((item)=>{console.log(item)})

兼容寫法:for(let i = 0,len = arr.length;i < len;i++){console.log(arr[i])}

11.IOS safari瀏覽器橫豎屏切換後  佈局不能撐滿問題(豎屏切換爲橫屏默認全屏,橫屏在切換爲豎屏safari默認底部欄消失,而後點擊出現豎屏佈局不能再次撐滿)

在body下第一個dom節點使用fixed佈局 =>

.firstElement{

position: fixed;        top: 0;        bottom: 0;        left: 0;        right: 0;        width: 100%;        height: 100%;        overflow: hidden;

}

舒適提示 =>ios下fixed元素容易定位出錯，軟鍵盤彈出時，影響fixed元素定位 android下fixed表現要比iOS更好，軟鍵盤彈出時，不會影響fixed元素定位 ios4下不支持position:fixed 解決方案： 可用iScroll插件解決這個問題

12.解決移動端瀏覽器 vh 單位異常問題

在作一個響應式佈局時用 vh 單位定義了元素的高度，結果在發如今移動端的 Chrome 和 Firefox 瀏覽器中，瀏覽器 URL 欄顯示的狀況下元素都出現了錯位。

查找到緣由是移動端下瀏覽器對 100vh 的定義不考慮 URL 欄的高度（不管 URL 欄顯示仍是隱藏），能夠用下面這張圖直觀地體現問題：

左側是咱們指望的 100vh 「全屏」的高度，但右側是 URL 欄顯示的狀態下「全屏」的高度，100vh 在這時已經超出了「全屏」高度。

解決方案以下:

1.目前找到最好的解決方案是項目： JS 執行過一次初始化 vhCheck() 後，就能夠直接用 CSS 變量 --vh-offset 修正 100vh 了。

用法：

1. npm install vh-check

2. import vhCheck from 'vh-check'

vhCheck()

3. main {

height: 100vh; /* 兼容不支持 var 變量的瀏覽器 (<= IE11) */

height: calc(100vh - var(--vh-offset, 0px)); /* 修正後的 100vh */

}

2.設置根節點 body,html的高度爲100%,而後依次讓子節點的高度也依次的100%

例html:

css:

body , html {

height:100%;

}

.container{

height:100%;

}

13.IOS 手機qq瀏覽器 劫持video標籤視頻播放轉換爲自帶視頻播放而且沒法關閉,除非刷新頁面(大坑)

解決方案:   使用canvas播放器:muffinman.io/html-canvas….

14.手機搜狗 火狐瀏覽器 點擊圖片出現瞬間的藍色背景色

解決方案:   img{ background-color:transparent; }

15.transition動畫中用left製做動畫可能會出現卡卡的不流暢

解決方案：使用translate3D方式製做動畫就能夠了。

16.流式佈局

/父元素/ display: flex; align-items: center; justify-content: center; display: flex; justify-content: space-between; flex-wrap: wrap; align-content: flex-start; /子元素/ flex: auto; flex: none;

17.如何解決移動端hover的問題？

用:active代替，直接能夠解決，最快。

18.vue,nuxt項目 若是默認用的router:{mode:'history'} 部署到線上環境切換到子路由刷新404問題

解決方案:

1.服務器端配置 www.cnblogs.com/tugenhua070…

2.router:{mode:'hash'}

3.服務器搭建node環境

19.js 監聽手機橫豎屏事件orientationchange觸發時 文檔不必定渲染完成延遲大概在300ms, 因此 只有延遲處理頁面佈局.不延遲解決方案

解決方案:使用css

//豎屏           @media screen and (orientation: portrait) {}

//橫屏            @media screen and (orientation:landscape) {}

20.flex佈局子元素在低版本安卓機上justify-content:space-between失效問題

先檢查子元素是否是塊元素，若是不是設置display:block就能夠解決問題

21.flex-wrap: wrap相對較舊版本手機自帶瀏覽器不換行問題如何解決？

對於父元素有必要就text-align:center；子元素就設置display:inline-block。

22.CSS3屬性-webkit-font-smoothing字體圖標抗鋸齒渲染

[class^="svg-icon-"], [class*=" svg-icon-"] { text-rendering: auto; -webkit-font-smoothing: antialiased; }

23.數字badge由圓圈到圓角橢圓自動伸長技巧

.round {        background-color: #28a745;        min-width: 18px;        height: 18px;        line-height: 18px;        text-align: center;    }

24.彈框裏的滾動條滾動時，外部body也跟着滾動的問題

解決方案：彈框彈出時，能夠把body的position設爲absolute;top:0;left:0;41

25.移動端近似解決1像素邊框問題(僞類 + transform 實現)

我的認爲僞類+transform是比較完美的方法了。原理是把原先元素的 border 去掉，而後利用 :before 或者 :after 重作 border ，並 transform 的 scale 縮小一半，原先的元素相對定位，新作的 border 絕對定位。

單條border樣式設置：

.scale-1px{ position: relative; border:none; } .scale-1px:after{ content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }         四條boder樣式設置:

.scale-1px{ position: relative; margin-bottom: 20px; border:none; } .scale-1px:after{ content: ''; position: absolute; top: 0; left: 0; border: 1px solid #000; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top; }              最好在使用前也判斷一下，結合 JS 代碼，判斷是否 Retina 屏：

if(window.devicePixelRatio && devicePixelRatio >= 2){ document.querySelector('ul').className = 'scale-1px'; }               優勢：

1. 全部場景都能知足

2.支持圓角(僞類和本體類都須要加border-radius)

缺點：對於已經使用僞類的元素(例如clearfix)，可能須要多層嵌套

26.解決ios瀏覽器橡皮筋效果

document.body.addEventListener(        'touchmove',      function(e) {          e.preventDefault() //阻止默認的處理方式(阻止下拉滑動的效果)      },     { passive: false }     ) //passive 參數不能省略，用來兼容ios和android

在須要滾動的區域添加touchmove.stop

27.H5消除ios移動端 transition閃屏問題

.css {     -webkit-transform-style: preserve-3d;     -webkit-backface-visibility: hidden;     -webkit-perspective: 1000;}

28.html5+CSS 禁止IOS長按複製粘貼實現

/設置IOS頁面長按不可複製粘貼，可是IOS上出現input、textarea不能輸入，所以將使用-webkit-user-select:auto;/ *{ -webkit-touch-callout:none; /系統默認菜單被禁用/ -webkit-user-select:none; /webkit瀏覽器/ -khtml-user-select:none; /早期瀏覽器/ -moz-user-select:none;/火狐/ -ms-user-select:none; /IE10/ user-select:none; } input,textarea { -webkit-user-select:auto; /webkit瀏覽器/ margin: 0px; padding: 0px; outline: none; }

29.移動端 css禁止保存圖片

img { pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; }

30.css實現中間粗兩頭細的線條

&::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: -webkit-linear-gradient(left, #000 -4%, #e6e6ff 50%, #000 100%); }

30.audio currentTime 手機端無效

andorid的話，是須要執行了play，才能夠設置currentTime的，能夠改爲這樣解決

audio_player = $('#auplayer')[0]; audio_player.play(); audio_player.pause(); audio_player.currentTime = 52; audio_player.play();