苹果手机顶部安全区兼容

问题：

如图所示，标题与ios安全区域没有分开。

解决方式：

写一个div，使它高度与Ios安全区一致。将其余内容挤压到安全区下

具体代码如下

<template><div class="quiz-edit"><div class="top"><div class="van-safe-area-inset-top"></div>//该div置于安全区内<div class="nav-bar"><van-icon name="arrow-left" class="left" :size="20" @click="onClickLeft"/><div class="center"><span class="title">问题编写</span><span class="tips">可使用提问次数：4次</span></div><span class="myquiz" @click="onClickRight">我的提问</span></div></div></div>
</template><style lang="less" scoped>// 苹果手机顶部安全区 兼容
@supports (top: env(safe-area-inset-top)) {.van-safe-area-inset-top {height: constant(safe-area-inset-top);height: env(safe-area-inset-top);}
}.quiz-edit{overflow: hidden;// height: 45px;
}
.top{background: #fe484a;height: 45px;padding: 0 15px;position: fixed;top: 0;left: 0;width: 100%;z-index: 999998;.van-safe-area-inset-top {width: 100%;background-color: #fe484a;} .nav-bar{display: flex;.left{color: #fff;line-height: 45px;width: 24px;height: 24px;}.center{position: absolute;left: 50%;width: 60%;margin-left: -31%;height: 45px;z-index: 99999999;color: #fff;overflow: hidden;text-align: center;.title{display: block;// width: 30%;font-size: 16px;line-height: 16px;padding-top: 8px;margin-left: 5%;z-index: inherit;}.tips{display: block;margin-top: 5px;font-size: 12px;text-align: center;z-index: 999999;}}.myquiz{line-height: 45px;font-size: 14px;z-index: 999999;position: absolute;// top: 0;right: 15px;color: #fff;}}}
</style>

苹果手机顶部安全区兼容相关推荐

android 点击返回顶部,Android scrollToTop实现点击回到顶部（兼容PullTorefreshScrollview）...
前言最近因为项目组需求,特研究了一下"回到顶部"效果,即:页面里有scrollview,内容很多,当滑动到页面下面或者更深时,需要回到顶部,即可点击出现的按钮,省得回滑N久.我没 ...
苹果手机 ajax不兼容,技术回顾：浏览器兼容性 axios+fetch+ajax
css盒: box-sizing:content-box;表示标准的盒子模型 box-sizing:border-box表示的是IE盒子模型 box-sizing:padding-box,这个属性值的 ...
vue刘海屏兼容组件
vue 刘海屏兼容组件 /* 无返回按钮的标头 */ <template><div v-if="GLOBAL.evnType === GLOBAL.ENV_TYPES.AP ...
自定义顶部菜单navigationBar方式
前言: 开发中,设计师也是奇思妙想,把小程序顶部的默认菜单改成了自己觉得好看的样式,改了返回icon的样式,加了各种返回首页.收藏.什么鬼的按钮,甚至把胶囊按钮都给改了~~~,好吧,遵从设计师的审美, ...
js原生实现过渡效果的返回顶部功能实例
问题描述适用范围:所有前端界面,返回顶部按钮兼容:ie 9 以上以下是实现功能的代码: <div style="position: fixed; width: 40px; hei ...
select苹果手机样式设置
移动端界面中需要写一个select下拉框,但是苹果手机样式不兼容. 解决方法:是直接把原始样式去掉,自己设置了一个背景图片. -webkit-appearance: none; appearance: ...
微信小程序——自定义顶部菜单navigationBar方式（可详细了！）
前言: 开发中,设计师也是奇思妙想,把小程序顶部的默认菜单改成了自己觉得好看的样式,改了返回icon的样式,加了各种返回首页.收藏.什么鬼的按钮,甚至把胶囊按钮都给改了~~~,好吧,遵从设计师的审美, ...
科技新品 | 可与华为苹果手机互联的腕表；专业4K战术型电竞萤幕；第三代英特尔至强可扩展处理器...
"科技新产品动态"栏目把新鲜的具有代表性的科学产品带到您眼前,涉及消费电子,半导体.服务器.智能家电等众多品类,提供图片和简单的文字介绍. TISSOT天梭表发布腾智·无界系列腕表 ...
苹果手机sim卡无效怎么办_苹果手机扬声器没声音怎么办
在看视频或者听音乐的时候iPhone突然无声了,应该是非常烦人的事情吧,那无声的原因是什么呢?这种情况我们又该如何处理呢? 苹果手机iPhone扬声器没有声音怎么办 1.症状通话期间或使用 iPho ...

苹果手机顶部安全区兼容

问题：

解决方式：

苹果手机顶部安全区兼容相关推荐

最新文章

热门文章