新的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);复制代码

至于各种浏览器的判断方式，此处就不说网上太多。