您的位置:新葡亰496net > 新葡亰官网 > 有关HTML5页面在中兴X适配难题,x用web前端适配

有关HTML5页面在中兴X适配难题,x用web前端适配

发布时间:2019-10-30 14:49编辑:新葡亰官网浏览(110)

    网页适配 iPhoneX,就是这么简单

    2017/11/27 · CSS · 7 评论 · iPhoneX

    原文出处: 凹凸实验室   

    前言iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素)。

    笔者通过查阅了一些官方文档,以及结合实际项目中的一些处理经验,整理了一套简单的适配方案分享给大家,希望对大家有所帮助,以下是处理前后效果图:

    新葡亰496net 1

    在前段时间上了热搜的iPhone-x 想必大家就算不知道,都对这个有些许的了解,不知道有都多少基友买了iPhone-x,对于我而言,要是真的花接近一万的价格去买一个手机,我觉得真的没有必要,况且,对于我们这一阶层来说,买这么一个接近一万价格的手机的作用在哪,难道仅仅是为了炫耀吗,没必要。iPhone配置的很多东西我们基本都用不上,无论是从价格还是从实惠,我都觉得你真的要用iPhone,买7是最划算的,如上言辞,仅代表个人意见。

    有关HTML5页面在iPhoneX适配问题,html5iphonex

    ​1.  iPhoneX的介绍  

    屏幕尺寸

    我们熟知的iPhone系列开发尺寸概要如下:

    新葡亰496net 2

    △ iPhone各机型的开发尺寸

    转化成我们熟知的像素尺寸:

    新葡亰496net 3

    △ 每个机型的多维度尺寸

    倍图其实就是像素尺寸和开发尺寸的倍率关系,但这只是外在的表现。倍图核心的影响因素在于PPI(DPI),了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念:《基础知识学起来!为设计师量身打造的DPI指南》

    iPhone8在本次升级中,屏幕尺寸和分辨率都遗传了iPhone6以后的优良传统;

    然而iPhone X 无论是在屏幕尺寸、分辨率、甚至是形状上都发生了较大的改变,下面以iPhone 8作为参照物,看看到底iPhone X的适配我们要怎么考虑。

    我们看看iPhone X尺寸上的变化:

    新葡亰496net 4

    2. iPhoneX的适配---安全区域(safe area)

    苹果对于 iPhone X 的设计布局意见如下:

    新葡亰496net 5

    核心内容应该处于 Safe area 确保不会被设备圆角(corners),传感器外壳(sensor housing,齐刘海) 以及底部的 Home Indicator 遮挡。也就是说 我们设计显示的内容应该尽可能的在安全区域内;

    3. iPhoneX的适配---适配方案viewport-fit 3.1 PhoneX的适配,在iOS 11中采用了viewport-fit的meta标签作为适配方案;viewport-fit的默认值是auto。

       viewport-fit取值如下:

                                                      auto 默认:viewprot-fit:contain;页面内容显示在safe area内
                                                      cover viewport-fit:cover,页面内容充满屏幕

       viewport-fit meta标签设置(cover时)

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

    3.2 css constant()函数 与safe-area-inset-top &safe-area-inset-left &safe-area-inset-right &safe-area-inset-bottom的介绍

    新葡亰496net 6

    如上图所示 在iOS 11中的WebKit包含了一个新的CSS函数constant(),以及一组四个预定义的常量:safe-area-inset-left,safe-area-inset-right,safe-area-inset-top和safe-area-inset-bottom。当合并一起使用时,允许样式引用每个方面的安全区域的大小。

    3.1当我们设置viewport-fit:contain,也就是默认的时候时;设置safe-area-inset-left,safe-area-inset-right,safe-area-inset-top和safe-area-inset-bottom等参数时不起作用的。

    3.2当我们设置viewport-fit:cover时:设置如下

    body {
        padding-top: constant(safe-area-inset-top);   //为导航栏 状态栏的高度 88px            
        padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0                
        padding-right: constant(safe-area-inset-right); //如果未竖屏时为0                
        padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px       
    }
    

    4. iPhoneX的适配---高度统计

    viewport-fit:cover 导航栏

      新葡亰496net 7

    5.iPhoneX的适配---媒体查询

    注意这里采用的是690px(safe area高度),不是812px;

    @media only screen and (width: 375px) and (height: 690px){
        body {
            background: blue;
        }
    }
    

    6.iphoneX viewport-fit

    问题总结

    1.关于iphoneX 页面使用了渐变色时;如果viewport-fit:cover;

    1.1在设置了背景色单色和渐变色的区别,如果是单色时会填充整个屏幕,如果设置了渐变色 那么只会更加子元素的高度去渲染;而且页面的高度只有690px高度,上面使用了padding-top:88px;

      新葡亰496net 8

    body固定为:

    <body><div class="content">this is subElement</div></body>
    

    1.单色时:

    * {
               padding: 0;
               margin: 0;        
           }        
           body {
               background:green;
               padding-top: constant(safe-area-inset-top); //88px            
               /*padding-left: constant(safe-area-inset-left);*/            
               /*padding-right: constant(safe-area-inset-right);*/            
               /*padding-bottom: constant(safe-area-inset-bottom);*/        
           }
    

    2.渐变色

    * {
               padding: 0;
               margin: 0;
           }
           body {
               background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22));
               padding-top: constant(safe-area-inset-top); //88px
               /*padding-left: constant(safe-area-inset-left);*/
               /*padding-right: constant(safe-area-inset-right);*/
               /*padding-bottom: constant(safe-area-inset-bottom);*/
           }
    

    解决使用渐变色 仍旧填充整个屏幕的方法;CSS设置如下

    新葡亰496net 9

    <!DOCTYPE html>
    <html>
    <head>
       <meta name="viewport" content="initial-scale=1, viewport-fit=cover">
       <title>Designing Websites for iPhone X: Respecting the safe areas</title>
       <style>        * {
           padding: 0;
           margin: 0;
       }
       html, body {
           height: 100%;
       }
       body {
           padding-top: constant(safe-area-inset-top);
           padding-left: constant(safe-area-inset-left);
           padding-right: constant(safe-area-inset-right);
           padding-bottom: constant(safe-area-inset-bottom);
       }
       .content {
           background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22));
           width: 100%;
           height: 724px;
       }    </style>
    </head>
    <body>
    <div class="content">this is subElement</div>
    </body>
    </html>
    

    2.页面元素使用了固定定位的适配即:{position:fixed;}

    2.1 子元素页面固定在底部时;使用viewport-fit:contain时;可以看到bottom:0时只会显示在安全区域内;

    新葡亰496net 10

    <!DOCTYPE html>
    <html>
    <head>
       <meta name="viewport" content="initial-scale=1">
       <!--<meta name="viewport" content="initial-scale=1, viewport-fit=cover">-->
       <title>Designing Websites for iPhone X: Respecting the safe areas</title>
       <style>
           * {
               padding: 0;
               margin: 0;
           }
           /*html,body {*/
               /*height: 100%;*/
           /*}*/
           body {
               background: grey;
               /*padding-top: constant(safe-area-inset-top);*/
               /*padding-left: constant(safe-area-inset-left);*/
               /*padding-right: constant(safe-area-inset-right);*/
               /*padding-bottom: constant(safe-area-inset-bottom);*/
           }
           .top {
               width: 100%;
               height: 44px;
               background: purple;
           }
           .bottom {
               position: fixed;
               bottom: 0;
               left: 0;
               right: 0;
               height: 44px;
               color: black;
               background: green;
           }
       </style>
    </head>
    <body>
       <div class="top">this is top</div>
       <div class="bottom">this is bottom</div>
    </body>
    </html>
    

    2.1 子元素页面固定在底部时;使用viewport-fit:cover时;可以看到bottom:0时只会显示在安全区域内;

    新葡亰496net 11

    添加html,body {width:100%;heigth:100%}

    新葡亰496net 12

    图1:

    * {
               padding: 0;
               margin: 0;
           }
           html,body {
               height: 100%;
           }
           body {
               background: grey;
               padding-top: constant(safe-area-inset-top);
               padding-left: constant(safe-area-inset-left);
               padding-right: constant(safe-area-inset-right);
               padding-bottom: constant(safe-area-inset-bottom);
           }
           .top {
               width: 100%;
               height: 44px;
               background: purple;
           }
           .bottom {
               position: fixed;
               bottom: 0;
               left: 0;
               right: 0;
               height: 44px;
               color: black;
               background: green;
           }
    

    图2:

    * {
               padding: 0;
               margin: 0;
           }
           html,body {
               height: 100%;
           }
           body {
               background: grey;
               padding-top: constant(safe-area-inset-top);
               padding-left: constant(safe-area-inset-left);
               padding-right: constant(safe-area-inset-right);
               /*padding-bottom: constant(safe-area-inset-bottom);*/
           }
           .top {
               width: 100%;
               height: 44px;
               background: purple;
           }
           .bottom {
               position: fixed;
               bottom: 0;
               left: 0;
               right: 0;
               height: 44px;
               color: black;
               background: green;
           }
    

    2.3 关于alertView弹框 遮罩层的解决方案

    新葡亰496net 13

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">-->
       <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
       <meta http-equiv="pragma" content="no-cache">
       <meta http-equiv="cache-control" content="no-cache">
       <meta http-equiv="expires" content="0">
       <title>alertView</title>
       <script data-res="eebbk">
           document.documentElement.style.fontSize = window.screen.width / 7.5   'px';
       </script>
       <style>
           * {
               margin: 0;
               padding: 0;
           }
           html,body {
               width: 100%;
               height: 100%;
           }
           body {
               font-size: 0.32rem;
               padding-top: constant(safe-area-inset-top);
               padding-left: constant(safe-area-inset-left);
               padding-right: constant(safe-area-inset-right);
               padding-bottom: constant(safe-area-inset-bottom);
           }
           .content {
               text-align: center;
           }
           .testBut {
               margin: 50px auto;
               width: 100px;
               height: 44px;
               border: 1px solid darkgray;
               outline:none;
               user-select: none;
               background-color: yellow;
           }
       </style>
       <link href="alertView.css" rel="stylesheet" type="text/css">
    </head>
    <body>
       <section class="content">
           <button class="testBut" onclick="showLoading()">弹框加载</button>
       </section>
       <script type="text/javascript" src="alertView.js"></script>
       <script>
           function showLoading() {
               UIAlertView.show({
                   type:"input",
                   title:"温馨提示",              //标题
                   content:"VIP会员即将到期",     //获取新的
                   isKnow:false
               });
               var xx = new UIAlertView();
              console.log(xx);
           }
       </script>
    </body>
    </html>
    

    总结

    以上所述是小编给大家介绍的有关HTML5页面在iPhoneX适配问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对帮客之家网站的支持!

    1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化...

    一、  安全区域(safe area)

    (备注:本文由本人翻译自Darryl Pogue的Understanding the WebView Viewport in iOS 11)

    适配之前需要了解的几个新知识

    从上图可以看出,这款手机还是很漂亮的,但是你们知道如何用web前端网页适配iPhone-x吗?今天我们就来分享下。

      与iPhone6/6s/7/8相比,iPhone X 无论是在屏幕尺寸、分辨率、甚至是形状上都发生了较大的改变,下面以iPhone 8作为参照物,先看看iPhone X尺寸上的变化:

    下面为正文内容:

    安全区域

    安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响,如下图蓝色区域:

    新葡亰496net 14

    也就是说,我们要做好适配,必须保证页面可视、可操作区域是在安全区域内。

    更详细说明,参考文档:Human Interface Guidelines – iPhoneX

    PhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素)。

    新葡亰496net 15


    viewport-fit

    iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:

    • contain: 可视窗口完全包含网页内容(左图)
    • cover:网页内容完全覆盖可视窗口(右图)
    • auto:默认值,跟 contain 表现一致

    新葡亰496net 16

    注意:网页默认不添加扩展的表现是 viewport-fit=contain,需要适配 iPhoneX 必须设置 viewport-fit=cover,这是适配的关键步骤。

    更详细说明,参考文档:viewport-fit-descriptor

    笔者通过查阅了一些官方文档,以及结合实际项目中的一些处理经验,整理了一套简单的适配方案分享给大家,希望对大家有所帮助,以下是处理前后效果图:

      苹果对于 iPhone X 的设计布局意见如下:

    新葡亰496net 17

    constant 函数

    iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:

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

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

    注意:当 viewport-fit=contain 时 constant 函数是不起作用的,必须要配合 viewport-fit=cover 使用。对于不支持 constant 的浏览器,浏览器将会忽略它。
    官方文档中提到 env 函数即将要替换 constant 函数,笔者测试过暂时还不可用。

    更详细说明,参考文档:Designing Websites for iPhone X

    新葡亰496net,适配之前需要了解的几个新知识

    新葡亰496net 18

    理解iOS11中的WebView

    如何适配

    了解了以上所说的几个知识点,接下来我们适配的思路就很清晰了。

    安全区域

      核心内容应该处于 Safe area 确保不会被设备圆角(corners),传感器外壳(sensor housing,齐刘海) 以及底部的 Home Indicator 遮挡。也就是说 我们设计显示的内容应该尽可能的在安全区域内;

    发布于09/13/2017,作者:Darryl Pogue

    第一步:设置网页在可视窗口的布局方式

    新增 viweport-fit 属性,使得页面内容完全覆盖整个窗口:

    JavaScript

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

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

    前面也有提到过,只有设置了 viewport-fit=cover,才能使用 constant 函数。

    安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响,如下图蓝色区域:

    二、h5页面适配

    iOS11在顶部状态栏区域带来了一些新的可能不太直观的行为改变,但是这对那些使用如Apache Cordova或Ionic等工具的开发人员来说非常重要。值得说明的是,这种改变将会影响任何基于Web的使用了固定状态栏的应用程序,当开发人员意图为iOS11构建这些应用程序时。那么此篇文章将会帮助您了解iOS11中的WebView组件。

    第二步:页面主体内容限定在安全区域内

    这一步根据实际页面场景选择,如果不设置这个值,可能存在小黑条遮挡页面最底部内容的情况。

    JavaScript

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

    1
    2
    3
    body {
      padding-bottom: constant(safe-area-inset-bottom);
    }

    也就是说,我们要做好适配,必须保证页面可视、可操作区域是在安全区域内。

    1、viewport-fit的meta标签作为适配方案;viewport-fit的默认值是auto。

    注意:现有的应用程序依然将正常工作,因为其内部的WebView的组件行为并未改变。这种改变只影响使用Xcode9编译适配iOS11的应用程序。

    第三步:fixed 元素的适配

    更详细说明,参考文档:Human Interface Guidelines - iPhoneX(

    viewport-fit取值如下:

    为了理解这种变化,我们来看看历史版本中状态栏的变化。

    类型一:fixed 完全吸底元素(bottom = 0),比如下图这两种情况:

    新葡亰496net 19

    可以通过加内边距 padding 扩展高度:

    JavaScript

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

    1
    2
    3
    {
      padding-bottom: constant(safe-area-inset-bottom);
    }

    或者通过计算函数 calc 覆盖原来高度:

    JavaScript

    { height: calc(60px(假设值) constant(safe-area-inset-bottom)); }

    1
    2
    3
    {
      height: calc(60px(假设值) constant(safe-area-inset-bottom));
    }

    注意,这个方案需要吸底条必须是有背景色的,因为扩展的部分背景是跟随外容器的,否则出现镂空情况。

    还有一种方案就是,可以通过新增一个新的元素(空的颜色块,主要用于小黑条高度的占位),然后吸底元素可以不改变高度只需要调整位置,像这样:

    JavaScript

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

    1
    2
    3
    {
      margin-bottom: constant(safe-area-inset-bottom);
    }

    空的颜色块:

    有关HTML5页面在中兴X适配难题,x用web前端适配。JavaScript

    { position: fixed; bottom: 0; width: 100%; height: constant(safe-area-inset-bottom); background-color: #fff; }

    1
    2
    3
    4
    5
    6
    7
    {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: constant(safe-area-inset-bottom);
      background-color: #fff;
    }

      auto默认:viewprot-fit:contain;页面内容显示在safe area内

    状态栏与安全区域

    在早期版本的iOS中,状态栏仅仅是屏幕顶部不变的不可触控的黑色条。对开发人员来说状态栏不过是一个系统UI,应用程序在它下面的空间运行而已。

    这种情况随着iOS7的到来有所变化,iOS7中的状态栏变成了透明的,并根据导航栏(Navigation Bar)的颜色变化而变化。它意味着如Cordova这样的WebView组件中的应用程序,必须检测运行环境的iOS版本,并将20px的内边距固定添加到页面的顶部,来保证下面内容的显示位置正确。

    而在iOS7以后的版本中状态栏只是增加了一些小的修正,包括增加了额外的横幅在通话时或者后台使用地理定位时。

    对于本地应用来说,这部分是通过UINavigationBar和autolayout原生控件自动处理的。这些原生组件中的布局规则会保证内容调整到适配状态栏的正确高度,从而显示在状态栏不会遮挡它们的所谓“安全区域”中。同时,如果你的导航栏(UINavigationBar)靠部对其,它的颜色就会自动延伸到状态栏后面,而形成统一的颜色。可不幸的是,对于基于Web的应用程序确不能享用这份福利。

    类型二:fixed 非完全吸底元素(bottom ≠ 0),比如 “返回顶部”、“侧边广告” 等

    像这种只是位置需要对应向上调整,可以仅通过外边距 margin 来处理:

    JavaScript

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

    1
    2
    3
    {
      margin-bottom: constant(safe-area-inset-bottom);
    }

    或者,你也可以通过计算函数 calc 覆盖原来 bottom 值:

    JavaScript

    { bottom: calc(50px(假设值) constant(safe-area-inset-bottom)); }

    1
    2
    3
    {
      bottom: calc(50px(假设值) constant(safe-area-inset-bottom));
    }

    viewport-fit

      coverviewport-fit:cover,页面内容充满屏幕

    iOS11中的改变

    新葡亰496net 20

    iPhone 8中iOS 11中的默认显示。

    iOS11中不同的是WebView中的内容现在也增加了对这个所谓的“安全区域”的支持。它意味着当你的页面中有个固定位置的标题栏元素(设置为top:0),那它在页面渲染完成后会出现在屏幕顶部的20px以下也就是对齐了状态栏的地方。但是,值得注意的是:当内容向下滚动时,内容会移动到状态栏的后面;而内容向上滚动时,将会再次跌落到状态栏的下方。(留下一个很尴尬的差距落差效果,原文是个视频,这里做了些截图。)

    新葡亰496net 21

    页面载入完成后

    新葡亰496net 22

    向上滚动

    新葡亰496net 23

    再向下滚动

    新葡亰496net 24

    最后

    别忘了使用 @supports

    写到这里,我们常见的两种类型的 fixed 元素适配方案已经了解了吧,但别忘了,一般我们只希望 iPhoneX 才需要新增适配样式,我们可以配合 @supports 这样编写样式:

    JavaScript

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

    1
    2
    3
    4
    5
    @supports (bottom: constant(safe-area-inset-bottom)) {
      div {
        margin-bottom: constant(safe-area-inset-bottom);
      }
    }

    iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:

    2、css constant()函数 与safe-area-inset-top & safe-area-inset-left & safe-area-inset-right & safe-area-inset-bottom的介绍.

    苹果为什么要这样设计?

    我想你应该看过了PhoneX的设计,它有着不规则的屏幕形状,在屏幕顶部切除了一块区域用来放置扬声器和相机。那么如果将页面的元素固定到真实屏幕的顶部,将会出现部分内容被放置在这块切除区域中,而导致根本无法触控使用。通过系统将它对齐到状态栏的底部,可以确保顶部标题栏中的全部内容都可以使用。

    这很酷……除了现有的应用程序中出现的那20px的尴尬……

    写在最后

    以上几种方案仅供参考,笔者认为,现阶段适配处理起来是有点折腾,但是至少能解决,具体需要根据页面实际场景,在不影响用户体验与操作的大前提下不断尝试与探索,才能更完美的适配。

    1 赞 4 收藏 7 评论

    新葡亰496net 25

    contain: 可视窗口完全包含网页内容(左图)

    当我们设置viewport-fit:contain,也就是默认的时候时;设置safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom等参数时不起作用的。当我们设置viewport-fit:cover时:设置如下

    iOS11中的修正

    幸运的是,苹果为开发者提供了一种通过元标签(head中的meta)来控制这个行为的方法。更幸运的是,苹果甚至将这个修复补丁更新到了已经被放弃的UIWebView控件中。

    这个可设置的属性是viewport-fit,它有三个可能的值:

    • contain:视图窗口应包含全部网页内容,即内容中的固定元素将被自动包含在所谓的“安全区域”中。
    • cover:网页中需要处理全部视图窗口即真实屏幕中的内容,即你的顶部元素可能会被遮挡,你要自己处理就像在iOS10上面一样。
    • auto:默认值,与contain相同

    因此,你要想将你的标题栏还原到最顶部在状态栏的后面,就像你在iOS10中做的,你要在你的页面的head的meta中的viewport设置中增加viewport-fit=cover。

    新葡亰496net 26

    看起来很好的视口合适设置覆盖在iOS 11在iPhone 8上。

    cover:网页内容完全覆盖可视窗口(右图)


    iPhoneX

    但是对于iPhoneX这种不规则的屏幕怎么办呢?在iPhoneX上状态栏不再是20像素高,并且因为扬声器和相机的遮挡,你的标题栏将完全无法触控使用了。需要注意的是,这种情况同样会出现在固定在底部的页脚部分,它将被麦克风遮挡住。

    注意:如果你的应用程序中使用了Launch Storyboard方式,那你的应用程序就只能使用iPhoneX的全屏幕控件。现有的应用程序将自动被显示在顶部和底部之间的矩形空间中。(这个注意不是特别理解,感觉是启动时用了Launch Storyboard,就是全屏幕显示也就是WebView可以显示全屏幕;以前编译的应用会自动夹在中间区域,无法撑满全屏)

    新葡亰496net 27

    iPhone X带来了一些新的挑战,即使在窗口合适的情况下也可以覆盖。

    不过幸运的是,苹果公司增加了一个方法,将这个“安全区域”的布局规范开放到了CSS中。它被作为一种常量设置被添加到了CSS中,可以通过CSS中的constant()函数来访问,并且这个函数已经被提交给了CSS工作组进行了标准化。

    这4个常量分别为:

    • constant(safe-area-inset-top):获取顶部安全区域插入值(单位为像素)
    • constant(safe-area-inset-bottom):获取底部安全区域插入值(单位为像素)
    • constant(safe-area-inset-left):获取左侧安全区域插入值(单位为像素)
    • constant(safe-area-inset-right):获取右侧安全区域插入值(单位为像素)

    而苹果还给了我们一个礼物就是这个变量也被更新到了UIWebView中。

    auto:默认值,跟 contain 表现一致

    body {

    使用示例

    假设你的页面上有一个固定位置的标题栏,在iOS10中的设置是这样的:

    header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 44px;
    
        padding-top: 20px; /* 状态栏高度 */
    }
    

    那么,要为iPhoneX或者其他iOS11的设备进行调整,你需要在页面head中的viewport meta中增加:

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

    更改CSS设置为:

    header {
        /* ... */
    
        /* iOS10中状态栏的高度 */
        padding-top: 20px;
    
        /* iOS11 中状态栏的高度 */
        padding-top: constant(safe-area-inset-top);
    }
    

    新葡亰496net 28

    iPhoneX中的自动填充

    需要注意的是,对于不知道如何解析constant语法的旧设备来说,保留返回值是很重要的(我的理解就是指上面的padding-top:20px;)。另外,你还可以在CSS的calc()方法中使用这些常量。

    如果你有底部导航栏的话,也要记得为它设置这个样式内容。


    (这个是笔者的鸣谢,咱也替广大开发者谢谢了!)

    特此感谢苹果公司的WebKit团队的Timothy Horton研发了本文提到的viewport-fit和constant()功能。感谢Shazron,Julio,Kerri,Greg和Mike在测试和验证中提供的贡献。

    (译文完毕!)

    小编推荐大家加一下这个群:561282136 这个群里好几百人了!大家遇到啥问题都会在里面交流!而且免费分享零基础入门资料 web前端开发 html,css入门基础资料一整套!是个非常好的学习交流地方!也有程序员大神给大家热心解答各种问题!很快满员了。欲进从速哦!各种PDF等你来下载!全部都是免费的哦!所以小编在群里等你们过来一起交流学习呢!

        padding-top: constant(safe-area-inset-top);   //为导航栏 状态栏的高度 88px           

    注意:网页默认不添加扩展的表现是 viewport-fit=contain,需要适配 iPhoneX 必须设置 viewport-fit=cover,这是适配的关键步骤。

        padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0               

    更详细说明,参考文档:viewport-fit-descriptor

        padding-right: constant(safe-area-inset-right); //如果未竖屏时为0               

    constant 函数

        padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px      

    iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量:

    }

    safe-area-inset-left:安全区域距离左边边界距离


    safe-area-inset-right:安全区域距离右边边界距离

    三、小程序适配

    safe-area-inset-top:安全区域距离顶部边界距离

    viewport-fit的适配方案不适合小程序。目前也没有看到小程序有对iPhone X等异形屏有特殊的接口或字段。小程序本身的底部tab栏对iPhone X的适配也只是简单的加了一个白色底栏,

    safe-area-inset-bottom:安全区域距离底部边界距离

    提高了原有tab栏的位置。我们只能通过 wx.getSystemInfo 接口取获取设备信息,该接口使用方法如下:

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


    注意:当 viewport-fit=contain 时 constant 函数是不起作用的,必须要配合 viewport-fit=cover 使用。对于不支持 constant 的浏览器,浏览器将会忽略它。

    wx.getSystemInfo({

    官方文档中提到 env 函数即将要替换 constant 函数,笔者测试过暂时还不可用。

          success: function (res) {

    更详细说明,参考文档:Designing Websites for iPhone X

               if (res.model == 'iphonrx') {

    如何适配

                     this.setData({

    了解了以上所说的几个知识点,接下来我们适配的思路就很清晰了。

                            isIphoneX: true

    第一步:设置网页在可视窗口的布局方式

                      })

    新增 viweport-fit 属性,使得页面内容完全覆盖整个窗口:

               }

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

          }

    前面也有提到过,只有设置了 viewport-fit=cover,才能使用 constant 函数。

    })

    第二步:页面主体内容限定在安全区域内


    这一步根据实际页面场景选择,如果不设置这个值,可能存在小黑条遮挡页面最底部内容的情况。

    其中 model 便是设备的型号等信息,如果 model 值为iphonerx ,便可认为该设备为iPhone X,我们在入口文件 app.js 中去进行检测,然后在全局增加一个 isIphoneX 字段。

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

    wxml部分:

    第三步:fixed 元素的适配

    1这是一个吸底按钮区域

    类型一:fixed 完全吸底元素(bottom = 0),比如下图这两种情况:

    wxss部分:

    可以通过加内边距 padding 扩展高度:


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

    .fix-iphonex-button {

    或者通过计算函数 calc 覆盖原来高度:

        bottom:68rpx!important;

    { height: calc(60px(假设值) constant(safe-area-inset-bottom));}

    }

    注意,这个方案需要吸底条必须是有背景色的,因为扩展的部分背景是跟随外容器的,否则出现镂空情况。

    .fix-iphonex-button::after {

    还有一种方案就是,可以通过新增一个新的元素(空的颜色块,主要用于小黑条高度的占位),然后吸底元素可以不改变高度只需要调整位置,像这样:

        content: ' ';

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

        position: fixed;

    空的颜色块:

        bottom: 0!important;

    { position: fixed; bottom: 0; width: 100%; height: constant(safe-area-inset-bottom); background-color: #fff;}

        height: 68rpx!important;

    类型二:fixed 非完全吸底元素(bottom ≠ 0),比如 “返回顶部”、“侧边广告” 等

        width: 100%;

    像这种只是位置需要对应向上调整,可以仅通过外边距 margin 来处理:

        background: #fff;

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

    }

    或者,你也可以通过计算函数 calc 覆盖原来 bottom 值:


    { bottom: calc(50px(假设值) constant(safe-area-inset-bottom));}

    至于为什么采用 68rpx,

    别忘了使用 @supports

    新葡亰496net 29

    写到这里,我们常见的两种类型的 fixed 元素适配方案已经了解了吧,但别忘了,一般我们只希望 iPhoneX 才需要新增适配样式,我们可以配合 @supports 这样编写样式:

    原文https://www.cnblogs.com/superlizhao/p/8329386.html

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

    写在最后

    以上几种方案仅供参考,笔者认为,现阶段适配处理起来是有点折腾,但是至少能解决,具体需要根据页面实际场景,在不影响用户体验与操作的大前提下不断尝试与探索,才能更完美的适配。

    以上就是今天的分享了,如果大家还有哪里不太了解的,可以在后台给我给我留言,后期,我做一个适应iPhone-x的录制视频分享在今日头条,从头分享结尾,细节讲解,这样大家就更能完全的消化,今天分享的内容可能对于很多前端零基础的同学很难消化,不过没关系,凑合看看,后期我会陆续更新基础的,谢谢关注。

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:有关HTML5页面在中兴X适配难题,x用web前端适配

    关键词: