iphonex适配

FrancisSoung 发布于2019-08-26 11:46 / 2927人阅读

摘要：第三步元素的适配类型一完全吸底元素类型二非完全吸底元素，比如返回顶部侧边广告等第四步如果我们只希望才需要新增适配样式，我们可以配合来隔离兼容样式

第一步：设置网页在可视窗口的布局方式
ios11新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：

第二步：页面主体内容限定在安全区域内
env() 和 constant()ios11新增特性

● safe-area-inset-left：安全区域距离左边边界距离
● safe-area-inset-right：安全区域距离右边边界距离
● safe-area-inset-top：安全区域距离顶部边界距离
● safe-area-inset-bottom：安全区域距离底部边界距离

这里我们只需要关注 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度（横竖屏时值不一样）。

body {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

第三步：fixed 元素的适配
● 类型一：fixed 完全吸底元素（bottom = 0）

{
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

● 类型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回顶部”、“侧边广告” 等

{
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}

第四步：如果我们只希望 iPhoneX 才需要新增适配样式，我们可以配合 @supports 来隔离兼容样式

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

超融合服务器服务器托管 iphonex iphonex怎么念如何设置iphonex 适配问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107517.html

iphoneX适配-客户端H5页面

摘要：由于做了全面屏并且还保留一块小刘海，因此很多以前的移动端页面需要结合客户端做出相应的适配，具体如下顶部通栏之前的客户端一直采用状态栏导航栏的做法。这时候需要底部留出一块空白安全区域，页面内容最终的底线应在手机拐角处。该安全区域的高度为。由于iphoneX做了全面屏并且还保留一块小刘海，因此很多以前的移动端H5页面需要结合App客户端做出相应的适配，具体如下： 1、顶部通栏之前的客户...

GitChat 2019-08-02 15:59 评论0 收藏0
iphoneX适配-客户端H5页面

摘要：由于做了全面屏并且还保留一块小刘海，因此很多以前的移动端页面需要结合客户端做出相应的适配，具体如下顶部通栏之前的客户端一直采用状态栏导航栏的做法。这时候需要底部留出一块空白安全区域，页面内容最终的底线应在手机拐角处。该安全区域的高度为。由于iphoneX做了全面屏并且还保留一块小刘海，因此很多以前的移动端H5页面需要结合App客户端做出相应的适配，具体如下： 1、顶部通栏之前的客户...

shiweifu 2019-08-05 12:33 评论0 收藏0
iphoneX适配-客户端H5页面

摘要：由于做了全面屏并且还保留一块小刘海，因此很多以前的移动端页面需要结合客户端做出相应的适配，具体如下顶部通栏之前的客户端一直采用状态栏导航栏的做法。这时候需要底部留出一块空白安全区域，页面内容最终的底线应在手机拐角处。该安全区域的高度为。由于iphoneX做了全面屏并且还保留一块小刘海，因此很多以前的移动端H5页面需要结合App客户端做出相应的适配，具体如下： 1、顶部通栏之前的客户...

wuaiqiu 2019-08-29 13:58 评论0 收藏0
iphoneX适配-客户端H5页面

摘要：由于做了全面屏并且还保留一块小刘海，因此很多以前的移动端页面需要结合客户端做出相应的适配，具体如下顶部通栏之前的客户端一直采用状态栏导航栏的做法。这时候需要底部留出一块空白安全区域，页面内容最终的底线应在手机拐角处。该安全区域的高度为。由于iphoneX做了全面屏并且还保留一块小刘海，因此很多以前的移动端H5页面需要结合App客户端做出相应的适配，具体如下： 1、顶部通栏之前的客户...

fou7 2019-08-21 17:56 评论0 收藏0
h5 在全屏iphonex中的适配

摘要：已经上线有一段时间了，作为业界刘海屏幕第一款机型，导致全屏不能正常的全屏显示了，，所以需要对适配，下面就详细说说如何适配先看一张适配前后的图提供的头可视化窗口完全包含网页内容网页内容完全覆盖默认值和一样详细见下图无耻盗图注意网页默认不 iphonex 已经上线有一段时间了，作为业界刘海屏幕第一款机型，导致全屏不能正常的全屏显示了，，所以需要对iphonx 适配，下面就详细说说如何适配 ...

kuangcaibao 2019-08-05 13:35 评论0 收藏0
适配iphoneX

tips iphone6设备宽高为375×667，屏幕分辨率为750×1334，故其设备像素比（dpr）为2。iphoneX的设备宽高375*812，屏幕分辨率为1125x2436，故dpr=3 适配iphoneX 目前了解的有3中方法，前两种方法是先判断机型判断iphoneX机型-1 通过判断navigator.userAgent中的字符串iphone和iphoneX的设备宽和高 const ...

CKJOKER 2019-08-02 10:17 评论0 收藏0