2

要兼容 iosX,需判断手机类型,怎么判断?

ios真的会搞事情!

旅图灬 542
2017-12-05 提问
6 个回答
5

已采纳

看到一篇关于 解决iPhoneX适配的文章: https://mp.weixin.qq.com/s?__...

亲测这个其实是针对 ios11系统有效。

1.设置网页在可视窗口的布局方式。
首先 meta里 添加 viewport-fit=cover

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />

2.页面主体内容限定在安全区域内。
可以配合 @supports 这样编写样式:

@supports (bottom: constant(safe-area-inset-bottom)) {
  div {
    margin-bottom: constant(safe-area-inset-bottom);
  }
}

更好的解决方式可以采用媒体查询 ,再加上面的代码 。

@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio : 3){
    //如果以后出现375*812,非ios机型,可以加上下面语句
    @supports (bottom: constant(safe-area-inset-bottom)) {
        
    }
}
1
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio:3) {
    
}
//js的话  根据这句媒体查询 判断设备宽高以及设备dpi就可以了
1

好多人回答,这边做一下补充吧。

viewport-fit

  • contain
  • cover
  • auto

只有打开cover 配置,才开启了 IPX 的全屏开关,默认会有保护区域的

<meta name="viewport" content="viewport-fit=cover" />

constant 函数

constant 目前的兼容性并不好,不建议使用。即使后期兼容性好了,依然会有旧版本 ios 系统,如11.1.1 存在,所以使用css media 匹配,匹配方案需要注意

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    /* 这代表IPX */
    /* 目前这种设备像素比 和 尺寸是很“奇葩”、特殊的,基本可以确定是 IPX */
}

@media only screen and (width: 812px) and (height: 375px) and (-webkit-device-pixel-ratio: 3) {
    /* 这代表IPX的横屏模式 */
    /* 针对 IPX 横屏单独处理 */
}

如果想使用 JS 判断,可以获取 UA,根据 操作系统,像素比,屏幕宽高比等信息进行综合判断,但获取到的结果未必是准确的。

0

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/(i1+;( U;)? CPU.+Mac OS X/); //ios终端
alert('是否是Android:'+isAndroid);
alert('是否是iOS:'+isiOS);


  1. ;
0
if(/os\s+(\d+)/i.test(navigator.userAgent)){
    // IOS code
}
0
(function(){
  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  var ratio = window.devicePixelRatio || 1;
  var screen = {
    width : window.screen.width * ratio,
    height : window.screen.height * ratio
  };
  if (iOS && screen.width == 1125 && screen.height === 2436) {
    alert('iPhoneX Detected!');
  }
})();

撰写答案

推广链接