web端iphonex的各種瀏覽器適配問題和解決方案

白鷺先生發表於2017-11-17
WebiPhone瀏覽器

新的iphonex因為沒有實體home按鍵,多了一個虛擬home按鍵導致大量的適配問題。
現在iphonex的web端適配基本不用考慮頭部的問題，主要需要關注的fixed底部定位的問題。

先看看所遇到的問題

下面是未經適配iphonex下的各瀏覽器的展示情況:
safari的截圖:


chrome的截圖:

UC瀏覽器:

QQ瀏覽器:

手機QQ內嵌瀏覽器:

微信內嵌瀏覽器:

得出結論

  • 可以看出fiexd定位的部分在safari,chrome,微信內嵌瀏覽器會被擋住部分文字，對著三個瀏覽器只需要把fixed的定位網上提20多個畫素即可
  • 手機QQ內嵌瀏覽器是個特例：他會自動把你的fixed定位往上提一部分，幫你做適配但是也坑你了下面漏空的一部分他也沒管（這個很操蛋不知道後續版本會修復不），對此瀏覽器不用做任何操作！
  • UC和QQ瀏覽器因為本身做了相應處理不用做任何的適配操作！

那現在我們需要對不一樣的瀏覽器做不一樣的對應處理

獲取裝置資訊和瀏覽器資訊。判斷iphonex的方法，因為他奇葩的解析度1125*2436 通過這個就能斷定就是他了！

    var w=window.screen.width * window.devicePixelRatio;
    var h=window.screen.height * window.devicePixelRatio;
    _client.iphonex=!!(w==1125&&h==2436);複製程式碼

至於各種瀏覽器的判斷方式，此處就不說網上太多。

相關文章