iPhone X Web前端页面适配(处理可爱的刘海)

一、两个概念

iPhone X和IOS 11的发布,不在许多技术方面造成了一定的冲击,前端也不可以避免地也受到影响,因为iPhone X刘海的影响,在编写前端页面的时候要做一些处理,下面先提出一些新的概念。
  1. 安全区域

    因为刘海的关系,所有的展示都会放在一个叫做safe-area的区域,如下图(1-1),主要是为了防止显示的内容被刘海传感器(house sensor),圆角边框(rounded corners)所遮挡,这样对用户来说是不友好的,但是如果全部内容被放置在默认的安全区域,显示的内容就会被压缩,这个时候需要做一些处理,既然页面能够正常显示,又能够不被安全区域遮挡。

  2. CSS3新特性viewport-fit

    在w3c.org官方给出的关于圆形展示(Round display)的标准中, 提到了viewport-fit这一属性,这个属性表明了对于某些屏幕并不是矩形形状的设备的时候浏览器该如果进行显示。传送门:viewport-fit官方参考文档

  3. CSS3新特性env以及var预定义变量。

    在定义以后viewport-fix以后, 浏览器会自动生成四个padding变量,即用来将页面向内挤压到可以正常显示的位置。这个时候需要用到env或者constant来将变量转换成CSS属性值并且赋值给属性。ps:env好像还在开发中,好像只支持IOS 11.2及以上。目前比较稳妥的方法就是constant和env一起使用。传送门:var预定义变量官方参考文档

安全区域Safe_Area说明图

图1-1 安全区域(Safe Area)

二、环境要求

软件环境要求: 能跑xcode 9.1的机器一台(我用的Mac mini,主要是用来开启iPhone X模拟器,穷~~~)
            一个IDE(sublime或者vscode随意)
            一个本地调试服务器(用npm安装一个http-server就行) 
            当然还有最重要的,就是你~~~~

三、开始动手

  1. 在meta中添加viewport-fit=cover(告诉浏览器要讲整个页面渲染到浏览器中,不管设备是圆角与否,这个时候会造成页面的元素被圆角遮挡),如下图3-1。

边缘元素被遮挡

图3-1 边缘元素被遮挡

  
2. 为了处理这些显示的问题,我们需要使用到env,constant还有预定义变量safe-area-inset-top,safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left。全部使用的这些方法或者变量都是在Safari中全部定义好的,我们就正常使用就行。但是别忘记了还要做一个向下兼容。

下面附上完整的代码以及一些测试图。

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>iphone X 屏幕以及其他iphone屏幕适配</title>
    <style>
    /* 一、样式基本初始化 */
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        width: 100%;
        box-sizing: border-box;
        position: relative;
        height: 1000px;
        background-color: #ccc9ca;
    }

    ul,
    li {
        list-style: none;
        text-align: center;
    }

   /* 导航栏因为是基于屏幕定位,所以padding要进行单独的计算。env在IOS 11.2中新增的,constant在IOS 11.2 已经被废弃,但是我们要做兼容,所以都要用上。 */
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: block;
        box-sizing: border-box;
        /* 因为header导航栏是基于屏幕进行定位,所以要做单独的padding挤压处理 */
        padding-right: constant(safe-area-inset-right);
        padding-left: constant(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-left: env(safe-area-inset-left);
        overflow: scroll;
        background-color:#2889e8;
    }
    header ul {
        display: block;
        width: 200%;
        background-color:#2889e8;
        box-sizing: border-box;
        line-height: 32px;
        height: 32px;
        padding: 0 10px;
    }
    header ul li {
        float: left;
        padding: 0px 8px;
        color: #666;
        font-weight: 500;
    }
    header ul:after {
        display: table;
        height: 0;
        clear: both;
        height: 0;
        content: "";
    }
    .show {
        margin-top: 36px;
        width: 100%;
        box-sizing: border-box;
        padding: 0px 10px 10px;
    }
    .active {
        color: #2889e8;
        background-color: #ffffff;
    }


    .show li{
        padding: 10px 0;
        background-color: #fff;
        border-radius: 4px;
        margin-bottom: 5px;
    }
    /* body 在横屏底下和竖屏底下一定要做好定位,不然*/
    /* 竖屏底下的查询 */
    @media screen and (orientation: portrait) {
        body {
            /* 防止页面被刘海遮住 */
            padding-top: constant(safe-area-inset-top);
        }
    }
    /* 横屏底下的查询 */
    @media screen and (orientation: landscape) {
        body {
            /* IOS 11支持*/
            padding-right: constant(safe-area-inset-right);
            padding-left: constant(safe-area-inset-left);
            /*IOS 11.2版本版本支持*/
            padding-right: env(safe-area-inset-right);
            padding-left: env(safe-area-inset-left);
        }
    }

    </style>
</head>

<body>
    <header style="">
        <ul style="">
            <li class="active">时事</li>
            <li>社会</li>
            <li>热点</li>
            <li>时事</li>
            <li>社会</li>
            <li>热点</li>
            <li>时事</li>
            <li>社会</li>
            <li>热点</li>
        </ul>
    </header>
    <div class="show">
        <ul>
            <li>1 我是列表项</li>
            <li>2 我是列表项</li>
            <li>3 我是列表项</li>
            <li>4 我是列表项</li>
            <li>5 我是列表项</li>
        </ul>
    </div>
    <div class="show">
        <ul>
            <li>1 我是列表项</li>
            <li>2 我是列表项</li>
            <li>3 我是列表项</li>
            <li>4 我是列表项</li>
            <li>5 我是列表项</li>
        </ul>
    </div>
</body>

四、一些测试图

1. iPhone X竖屏(图 4-1)以及横屏( 图 4-2 )显示:

iPhone X竖屏显示


图 4-1 iPhone X竖屏显示

  
iPhone X横屏显示


图 4-2 iPhone X横屏显示

          

2. iPhone 8 竖屏( 图 4-3 ) 以及横屏( 图 4-4 )显示:

iPhone 8 竖屏显示


图 4-3 iPhone 8竖屏显示

  

iPhone 8 横屏显示


图 4-4 iPhone 8横屏显示

    

3. iPhone 6 竖屏( 图 4-5 ) 以及横屏( 图 4-6 )显示:

iPhone 6竖屏显示


图 4-5 iPhone 6竖屏显示

  

iPhone 6横屏显示


图 4-6 iPhone 6横屏显示

五、总结以及提供一些参考资料:

  1. 总结:个人认为iPhone X虽然有了可爱的刘海,可能看起来会很难处理,但是实际上官方提供的方法还是相对简单的,关键还是要看公司的业务逻辑怎么样。如果上面我有说的不对的,敬请各位给我提提意见,谢谢大家,共同进步。

  2. 参考资料:
    webkit官方给出的解决iPhone X刘海的方法
    小邓先生的中文解决方法参考

©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值