手机端遇到的问题记录

发布时间:2021-09-17 23:13:12

1、使元素滚动到当前视口顶部:

定义ref: private refScroll: { current: HTMLDivElement | null } = React.createRef();
this.refScroll.current.scrollIntoView({
behavior: ‘smooth’,
});




2、iphoneX 安全区问题
1) 设置网页在可视窗口的布局方式

新增 viewport-fit 属性,使得页面内容完全覆盖整个窗口:
viewport-fit : contain(可视窗口完全包含网页内容)
cover(网页内容完全覆盖可视窗口)
auto(默认值,效果同contain)
env() constant() ios11新特性。webkit的一个css函数,用于设置安全区域与边界的距离
env()/* 兼容 iOS >= 11.2 /
constant()/
兼容 iOS < 11.2 */ (两者需同时存在且不能置换顺序)
参数:
safe-area-inset-left:安全区域距离左边边界距离
safe-area-inset-right:安全区域距离右边边界距离
safe-area-inset-top:安全区域距离顶部边界距离
safe-area-inset-bottom:安全区域距离底部边界距离
附: 当viewport-fit值为cover时才可使用env() constant()


2)页面主体内容限定在安全区域内

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


3)fixed元素适配

添加padding-bottom(不设置外层元素的高度,由内部元素撑起高度)
{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}


给高度添加安全区域
{
height: calc(60px(假设值) + constant(safe-area-inset-bottom));
height: calc(60px(假设值) + env(safe-area-inset-bottom));
}


添加一个div块撑起安全区域,高度设置为安全区高度
{
position: fixed;
bottom: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
height: env(safe-area-inset-bottom);
background-color: #fff;
}

相关文档

  • Linux??LVS负载均衡
  • 商标申请书的格式
  • pb 导出文件 日期格式_Magicodes.IE在.NET Core中通过请求头导出多种格式文件
  • Java并发编程笔记??J.U.C之collections框架:ConcurrentLinkedQueue
  • 四季如春的校园
  • word2003行距怎么设置
  • 质量控制实习报告范文
  • Android里静态库存放路径,Android开发实践:在任意目录执行NDK编译
  • 2020家长高考寄语简短
  • CSS像素和物理像素(移动端完美视口)
  • 初二物理暑假作业试题
  • 薄荷叶茶的功效与作用
  • 手机12306支付不了怎么办
  • 浅谈我国普通高等学校高水平游泳队教练员队伍建设与发展的论文
  • 语文教学日记
  • 敬老爱老离我们很近
  • c语言在程序中显示现在星期几,C语言程序设计: 输入年月日 然后输出是星期几...
  • 不抱怨世界读书读后感范文
  • 校本教研个人工作计划精选多篇
  • 恐龙复活
  • 区块链技术开发 分享商业积分体系结合思路
  • 写意中国画菊花图片欣赏
  • 音乐教育感言例文
  • 房地产商业广告词大全
  • UVA - 133 The Dole Queue(自顶向下 模拟)
  • 宝宝调补中医膳食食谱(2)
  • 龙虾养殖前景如何
  • 2017年春节去哪儿旅游最好
  • 计算机四级操作系统题目总结(1-3)
  • 毒品与酒精: 矛盾与困惑的结合体
  • 猜你喜欢

  • 2月2017情人节祝福短信
  • 名师推荐第6章磁路与铁芯线圈电路潘平
  • 九招让孩子喜欢做作业
  • 校园一角作文500字_3
  • 处女座女和天蝎座男在一起合适吗
  • 子情境二支票结算-精选文档
  • 「CRUD」真的简单吗?
  • 解读从市场营销到网络营销管理的发展史【推荐下载】
  • 分析仪器设备管理制度
  • java高级编程--反射机制(Reflection)
  • oppor7s怎么隐藏应用
  • 2014年普通高等学校招生全国统一考试数学数学【理】试卷【安徽卷,扫描版】
  • 最新新标准版小学英语五年级上册专项测试卷三 情景交际与补全对话 期末复*
  • 脚指甲变黄怎么治疗呢?
  • 广西天麻有什么种植技术
  • 厨房美食菜谱:咖哩猪排配米饭的做法
  • 不同方法检测急性呼吸道感染患儿咽拭子与鼻拭子标本诊断呼吸道邯?《靖腥镜钠兰
  • 【工程常用表格】沟槽回填检验批质量验收记录
  • 2018中考体育足球项目练习技巧
  • 健康教育对高血压患者血压及生活质量影响
  • 医院感染暴发报告制度及控制程序
  • 2019年人教版数学小学四年级上册第1课时亿以内数的认识导学案
  • 【2018最新】印刷协议书-优秀word范文 (14页)
  • 打胎药吃了多久才出血?吃了打胎药多久掉下来?
  • 学生会纪检部个人半年工作总结
  • 假如季节有颜色
  • 集团人力资源战略3年规划书(草案)[精品文档]
  • 美国发明世界首款携带式风力发电机Trinity
  • 在课堂教学中如何培养学生数学学科核心素养
  • 2019年中考历史专题复* 专题六 中外历史上的思想解放运动练*
  • 陕西省2018年瑟肽瓯O障?廴丝际蕴
  • 最新-优秀学生自荐书怎么写 精品
  • 最新人教版小学二年级语文上册看拼音写词语名师优秀教案
  • 上海慈锐机电科技有限公司(企业信用报告)- 天眼查
  • 刑事和解制度化法思想与权源基础的探讨——刑罚权之裁量权配置
  • 人教小学美术六年级上册《第13课古建筑的保护》wrod教案.doc
  • 精选关于猴子的歇后语
  • 硫酸法钛白粉清洁生产工艺
  • 选择题高考数学解法大全
  • 那件事,我忘不了作文400字
  • 河南省郑州市郑东新区九年制实验学校2017_2018学年七年级语文下学期期中试题新人教版
  • 七年级英语下册Unit10I’dlikesomenoodlesSectionB1a_1d教学课件新人教目标版
  • 电脑版