相关HTML5网页页面在iPhoneX兼容难题

日期:2021-02-23 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

​1.  iPhoneX的详细介绍
 

显示屏尺寸

大家熟知的iPhone系列开发设计规格概述以下:

△ iPhone各机型的开发设计规格

转换成大家熟知的像素规格:

△ 每一个机型的多维度度规格

倍图实际上便是像素规格和开发设计规格的倍率关联,但这只是外在的主要表现。倍图关键的危害要素在于PPI(DPI),掌握显示屏密度与各规格的关联有助于大家深层了解倍率的定义:《基本专业知识学起来!为设计方案师量身打造的DPI指南》

iPhone8在本次升級中,显示屏尺寸和辨别率都基因遗传了iPhone6之后的优质传统式;

但是iPhone X 不管是在显示屏尺寸、辨别率、乃至是样子上都产生了较大的更改,下面以iPhone 8做为参考物,看看究竟iPhone X的兼容大家要如何考虑到。

大家看看iPhone X规格上的转变:

2. iPhoneX的兼容---安全性地区(safe area)

iPhone针对 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内                                                   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的详细介绍

如上图所示 在iOS 11中的WebKit包括了1个新的CSS涵数constant(),和1组4个预订义的变量定义:safe-area-inset-left,safe-area-inset-right,safe-area-inset-top和safe-area-inset-bottom。当合拼1起应用时,容许款式引入每一个层面的安全性地区的尺寸。

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 + 导航栏栏

  

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在设定了情况色纯色和渐变色色的差别,假如是纯色时会填充全部显示屏,假如设定了渐变色色 那末只会更为子元素的高宽比去3D渲染;并且网页页面的高宽比仅有690px高宽比,上面应用了padding-top:88px;

  

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设定以下

<!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时只会显示信息在安全性地区内;

<!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时只会显示信息在安全性地区内;

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

图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弹框 遮罩层的处理计划方案

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF⑻">
   <!--<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兼容难题,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!