首页 > 其他 > 详细

兼容IphoneX

时间:2018-03-28 14:55:44      阅读:190      评论:0      收藏:0      [点我收藏+]

兼容IphoneX的显示,一般有两种方法,一种通过css的media来做兼容,一种是通过js来做兼容。

一、我们先讲CSS的方法,我们要做两步即可:

1. 全屏覆盖,html使用

<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">

2.通过对底部上移或者顶部下移进行处理

 注:如果想下面constant env 属性有效果,请务必添加上面meta 标签才能实现。
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){ 
   body{
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
   }
   .iphonex-pt{
      padding-top: constant(safe-area-inset-top);
      padding-top: env(safe-area-inset-top);
   }
   .iphonex-pb{
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
   }
   .iphonex-mt{
      margin-top: constant(safe-area-inset-top);
      margin-top: env(safe-area-inset-top);
   }
   .iphonex-mb{
      margin-bottom: constant(safe-area-inset-bottom);
      margin-bottom: env(safe-area-inset-bottom);
   }
   .iphonex-pl{
      padding-left: constant(safe-area-inset-left);
      padding-left: env(safe-area-inset-left);
   }
   .iphonex-pr{
      padding-right: constant(safe-area-inset-right);
      padding-right: env(safe-area-inset-right);
   }
   .iphonex-ml{
      margin-left: constant(safe-area-inset-left);
      margin-left: env(safe-area-inset-left);
   }
   .iphonex-mr{
      margin-right: constant(safe-area-inset-right);
      margin-right: env(safe-area-inset-right);
   }
   .iphonex-bd-top-bg{
      border-top: 88px solid transparent;
   }
   .iphonex-bd-top{
      border-top: 44px solid transparent;
   }
   .iphonex-bd-bottom{
      border-bottom: 34px solid transparent;
   }
}

二、通过js来对IphoneX进行兼容

    通过判断设配的宽度高度还有设备的像素是否是IphoneX

if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){
    $(".phonex-pb").css("padding-bottom","34px");
}

对于constant(safe-area-inset-bottom) 这样的属性完全可以不用写在media 媒体查询里面,上面只是做了公共样式处理,safe-area-inset-bottom 意义其实相当于 底部34px。类似padding-bottom:34px;考虑其他兼容问题,多做了一个透明border 处理方法,仅仅是一种解决方式而已,其实都能实现。

 

兼容IphoneX

原文:https://www.cnblogs.com/cczlovexw/p/8663570.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!