先来看下iPhone X机型的样子
上图中，Iphonex机型在头部和底部新增了这两个区域，所以我们需要针对这类机型做些适配，方便我们的webapp的展示
h5做成的移动端页面，常见布局为头部+躯干+底部三栏模式，头部和顶部都是固定定位，躯干可里的内容可以滚动，暂定的布局如下：
<div class="page">
<header></header>
<main></main>
<footer></footer>
</div>
但如果没采用IphoneX机型的新的css属性，而直接采用position: fixed;top：0等常规写法，就会出现头部的导航栏被手机自带的状态栏(显示电量信号等等)遮挡的情况，底部的导航栏被IphoneX自带的呼吸灯(图中手机底部的白条)遮挡的情况，给用户的操作和体验带来困扰，目前针对这类问题，根据自己做过的项目，整理了一下几种解决方案
我使用的是vue框架，在index.html页面,我们需要添加
<meta name="viewport" content="width=device-width,viewport-fit=cover">
然后，在公共的app.vue页面，我们每个组件的展示，都是在这里被router-view替换，所以可以在这里处理一下公共的头部顶栏，具体的布局如下：
<template>
<div id="app">
<div class="placeholder_top" :style="{position:fixpositiona?'absolute':'fixed'}"></div>
<router-view class="routerview"></router-view>
</div>
</template>
上面的布局中，我们给class为placeholder_top的div写下如下：
.placeholder_top {
position: fixed;
top: 0;
left: 0;
width: 10rem;
background-color: #303030;
height: constant(safe-area-inset-top);
height: env(safe-area-inset-top);
z-index: 999;
}
这样的话，我们后续，单独的组件，就不用再处理这个顶部栏的问题，那下面，我们就可以处理下前面提到的头部问题，一般头部，我们大多都会封装成公共组件，所以在这里，因为受到我们在app.vue页面插入的那个元素的影响，我们的头部的css写法，也需要略微改动下，头部组件页面布局如下：
<template>
<header>
<div class="title" :style="{position:fixposition?'absolute':'fixed'}">
导航内容
</div>
<div class="placeholder"></div>
</header>
</template>
页面的css为：
header{
background-color: #303030;
.title{
position: fixed;
top:0;
top: constant(safe-area-inset-top);
top: env(safe-area-inset-top);
left: 0;
height：88px;
z-index: 999;
}
.placeholder{
height: 88px;
width: 10rem;
}
}
这样写，这个头部导航栏就会位居于手机状态栏之下了，不会影响到视窗，并且能兼容安卓和ios机型(这类兼容问题，还涉及到ios的系统问题，不过本文暂未涉及)
下面再来看下main区域的处理，因为上面header组件已经处理好了，所以main直接如下布局：
main {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: calc(88px + constant(safe-area-inset-bottom));
padding-bottom: calc(88px + env(safe-area-inset-bottom));
ps:这里说明一下，下面的两行，是用在当前页面没有底部导航栏的情况
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }，
main里面布局好了，直接写内容就可以了，
然后在看下底部的footer布局
<template>
<footer>
<div class="foot" :style="{position:fixposition?'absolute':'fixed'}">
底部内容
</div>
</footer>
</template>
底部内容的css如下：
footer{
position: fixed;
bottom: 0;
left: 0;
width: 10rem;
height: calc(88px + constant(safe-area-inset-bottom));
height: calc(88px + env(safe-area-inset-bottom));
background-color: #303030;
.foot{
position: absolute;
top:0;
left: 0;
width: 10rem;
height: 88px;
}
}
这样写，底部导航foot里的内容，就不会被手机自带的呼吸灯所遮挡
所以可以总结一下，我们在这种webapp适配中，可能需要采用的css写法如下：
position: fixed;
top: constant(safe-area-inset-top);
top: env(safe-area-inset-top);
bottom: constant(safe-area-inset-bottom);
bottom: env(safe-area-inset-bottom);
top: calc(1rem + constant(safe-area-inset-top));
top: calc(1rem + env(safe-area-inset-top));
bottom: calc(1rem + constant(safe-area-inset-bottom));
bottom: calc(1rem + env(safe-area-inset-bottom));
ps:在上面的写法中，有写到:style="{position:fixposition?'absolute':'fixed'}"，这个是为了解决用户点击输入框，弹出软键盘时，这类固定元素的定位不准的问题，感兴趣的可以研究下，本文暂不讨论
这里可以根据实际需求来采用不同的写法，大体布局逻辑建议不要偏差太大，这样写是为了统一处理，方便维护，另外如果有真机测试，发现布局兼容导致的样式问题，可以采用真机调试方法，用pc端浏览器调试webapp，审查元素，那样基本能解决大部分样式问题，关于真机调试，下回写
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。