devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

safe-area-inset-bottom iphone

作者：羊村懒王 | 2024-04-18 22:25:26

赞

踩

safe-area-inset-bottom

如果是学习前端的同学加个微信(id:cannywill)做个朋友，能帮尽量帮，也一起进步鸭

屏幕尺寸

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

△ iPhone各机型的开发尺寸

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

△ 每个机型的多维度尺寸

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

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

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

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

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

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

 

核心内容应该处于 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内
                                                  coverviewport-fit:cover,页面内容充满屏幕

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

 

  1. <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">
  2.

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

 

 

 

   如上图所示 在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时：设置如下

复制代码 
  1. body {
  2.     padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px            
  3.     padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0                
  4.     padding-right: constant(safe-area-inset-right); //如果未竖屏时为0                
  5.     padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px       
  6. }
复制代码

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

    viewport-fit:cover + 导航栏

　　

 

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

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

1
2
3
4
5
@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;

　　

body固定为：

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

1.单色时：

 

复制代码 
  1.        * {
  2.            padding: 0;
  3.            margin: 0;        
  4.        }        
  5.        body {
  6.            background:green;
  7.            padding-top: constant(safe-area-inset-top); //88px            
  8.            /*padding-left: constant(safe-area-inset-left);*/            
  9.            /*padding-right: constant(safe-area-inset-right);*/            
  10.            /*padding-bottom: constant(safe-area-inset-bottom);*/        
  11.        }
复制代码

2.渐变色

 

复制代码 
  1.        * {
  2.            padding: 0;
  3.            margin: 0;
  4.        }
  5.        body {
  6.            background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22));
  7.            padding-top: constant(safe-area-inset-top); //88px
  8.            /*padding-left: constant(safe-area-inset-left);*/
  9.            /*padding-right: constant(safe-area-inset-right);*/
  10.            /*padding-bottom: constant(safe-area-inset-bottom);*/
  11.        }
复制代码

 

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

复制代码 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <meta name="viewport" content="initial-scale=1, viewport-fit=cover">
  5.    <title>Designing Websites for iPhone X: Respecting the safe areas</title>
  6.    <style>        * {
  7.        padding: 0;
  8.        margin: 0;
  9.    }
  10.    html, body {
  11.        height: 100%;
  12.    }
  13.    body {
  14.        padding-top: constant(safe-area-inset-top);
  15.        padding-left: constant(safe-area-inset-left);
  16.        padding-right: constant(safe-area-inset-right);
  17.        padding-bottom: constant(safe-area-inset-bottom);
  18.    }
  19.    .content {
  20.        background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22));
  21.        width: 100%;
  22.        height: 724px;
  23.    }    </style>
  24. </head>
  25. <body>
  26. <div class="content">this is subElement</div>
  27. </body>
  28. </html>
复制代码

 

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

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

 

复制代码 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <meta name="viewport" content="initial-scale=1">
  5.    <!--<meta name="viewport" content="initial-scale=1, viewport-fit=cover">-->
  6.    <title>Designing Websites for iPhone X: Respecting the safe areas</title>
  7.    <style>
  8.        * {
  9.            padding: 0;
  10.            margin: 0;
  11.        }
  12.        /*html,body {*/
  13.            /*height: 100%;*/
  14.        /*}*/
  15.        body {
  16.            background: grey;
  17.            /*padding-top: constant(safe-area-inset-top);*/
  18.            /*padding-left: constant(safe-area-inset-left);*/
  19.            /*padding-right: constant(safe-area-inset-right);*/
  20.            /*padding-bottom: constant(safe-area-inset-bottom);*/
  21.        }
  22.        .top {
  23.            width: 100%;
  24.            height: 44px;
  25.            background: purple;
  26.        }
  27.        .bottom {
  28.            position: fixed;
  29.            bottom: 0;
  30.            left: 0;
  31.            right: 0;
  32.            height: 44px;
  33.            color: black;
  34.            background: green;
  35.        }
  36.    </style>
  37. </head>
  38. <body>
  39.    <div class="top">this is top</div>
  40.    <div class="bottom">this is bottom</div>
  41. </body>
  42. </html>
复制代码

 

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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
* {
     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;
}

 

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

 

 

图1：

复制代码 
  1.  * {
  2.            padding: 0;
  3.            margin: 0;
  4.        }
  5.        html,body {
  6.            height: 100%;
  7.        }
  8.        body {
  9.            background: grey;
  10.            padding-top: constant(safe-area-inset-top);
  11.            padding-left: constant(safe-area-inset-left);
  12.            padding-right: constant(safe-area-inset-right);
  13.            padding-bottom: constant(safe-area-inset-bottom);
  14.        }
  15.        .top {
  16.            width: 100%;
  17.            height: 44px;
  18.            background: purple;
  19.        }
  20.        .bottom {
  21.            position: fixed;
  22.            bottom: 0;
  23.            left: 0;
  24.            right: 0;
  25.            height: 44px;
  26.            color: black;
  27.            background: green;
  28.        }
复制代码

 

图2：

 

复制代码 
  1.        * {
  2.            padding: 0;
  3.            margin: 0;
  4.        }
  5.        html,body {
  6.            height: 100%;
  7.        }
  8.        body {
  9.            background: grey;
  10.            padding-top: constant(safe-area-inset-top);
  11.            padding-left: constant(safe-area-inset-left);
  12.            padding-right: constant(safe-area-inset-right);
  13.            /*padding-bottom: constant(safe-area-inset-bottom);*/
  14.        }
  15.        .top {
  16.            width: 100%;
  17.            height: 44px;
  18.            background: purple;
  19.        }
  20.        .bottom {
  21.            position: fixed;
  22.            bottom: 0;
  23.            left: 0;
  24.            right: 0;
  25.            height: 44px;
  26.            color: black;
  27.            background: green;
  28.        }
复制代码

 

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

 

 

复制代码 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">-->
  6.    <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">
  7.    <meta http-equiv="pragma" content="no-cache">
  8.    <meta http-equiv="cache-control" content="no-cache">
  9.    <meta http-equiv="expires" content="0">
  10.    <title>alertView</title>
  11.    <script data-res="eebbk">
  12.        document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px';
  13.    </script>
  14.    <style>
  15.        * {
  16.            margin: 0;
  17.            padding: 0;
  18.        }
  19.        html,body {
  20.            width: 100%;
  21.            height: 100%;
  22.        }
  23.        body {
  24.            font-size: 0.32rem;
  25.            padding-top: constant(safe-area-inset-top);
  26.            padding-left: constant(safe-area-inset-left);
  27.            padding-right: constant(safe-area-inset-right);
  28.            padding-bottom: constant(safe-area-inset-bottom);
  29.        }
  30.        .content {
  31.            text-align: center;
  32.        }
  33.        .testBut {
  34.            margin: 50px auto;
  35.            width: 100px;
  36.            height: 44px;
  37.            border: 1px solid darkgray;
  38.            outline:none;
  39.            user-select: none;
  40.            background-color: yellow;
  41.        }
  42.    </style>
  43.    <link href="alertView.css" rel="stylesheet" type="text/css">
  44. </head>
  45. <body>
  46.    <section class="content">
  47.        <button class="testBut" onclick="showLoading()">弹框加载</button>
  48.    </section>
  49.    <script type="text/javascript" src="alertView.js"></script>
  50.    <script>
  51.        function showLoading() {
  52.            UIAlertView.show({
  53.                type:"input",
  54.                title:"温馨提示",              //标题
  55.                content:"VIP会员即将到期",     //获取新的
  56.                isKnow:false
  57.            });
  58.            var xx = new UIAlertView();
  59.           console.log(xx);
  60.        }
  61.    </script>
  62. </body>
  63. </html>
复制代码
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/448545
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号