社区编辑申请
注册/登录
不要用100vh做移动响应,有问题?
移动开发
一般来说,我们使用 height:100vh 进行全屏布局,这是一种很方便的响应式方法。但当在实际设备上测试我们的设计时,我们遇到了几个问题。

一般来说,我们使用 height:100vh 进行全屏布局,这是一种很方便的响应式方法。

.content {
height: 100vh;
}

但当在实际设备上测试我们的设计时,我们遇到了几个问题:

  • 大部分移动端的Chrome和Firefox浏览器在顶部都有一个UI(地址栏等)。
  • 在Safari浏览器上,地址栏在底部,这就变得更加棘手了。
  • 不同的浏览器有不同大小的视口
  • 移动设备计算浏览器视口为(顶栏+文档+底栏)=100vh
  • 整个文档使用 100vh 填充到页面中

​问题

谷歌​:

图片

已检测到滚动条问题。糟糕的用户滚动和难以浏览的内容。

注意:在Safari上测试了这个问题,它更加糟糕。

解决方案

通过JS检测应用程序的高度

const documentHeight = () => {
const doc = document.documentElement
doc.style.setProperty('--doc-height', `${window.innerHeight}px`)
}
window.addEventListener(‘resize’, documentHeight)
documentHeight()

使用 css 变量:

:root {
--doc-height: 100%;
}

html,
body {
padding: 0;
margin: 0;
height: 100vh; /* fallback for Js load */
height: var(--doc-height);
}

最后结果

图片

现在没有任何额外的垂直滚动条出现,Safari也没有问题,这样的用户体验得到很大的提升。

责任编辑:赵宁宁 来源: 大迁世界
相关推荐

2022-06-15 11:02:40

网络安全运营

2022-06-13 09:45:51

Hook技术移动应用响应速度

2022-06-16 15:42:16

攻击面管理ASM

2022-06-14 16:55:25

互联网移动应用出海

2022-06-29 16:33:52

安全信息泄露信息安全

2022-06-28 05:35:46

勒索软件网络安全网络攻击

2022-06-23 09:22:57

Vue技巧前端

2022-06-15 10:30:07

数据中心5G蜂窝网络

2022-06-21 14:10:43

NIST网络安全

2022-06-12 12:51:46

iOS 16苹果MacOs

2022-05-05 09:27:31

Linux服务器优化

2022-06-07 14:31:09

K8S网络模型容器网络

2022-06-15 11:04:49

数据建设场景

2022-05-30 10:20:51

数据迁移

2022-06-16 11:06:07

开源Grafanaon-call

2022-05-27 15:06:22

攻击面管理(ASM)网络安全运营

2022-06-16 08:35:10

CSS属性前端

2022-06-13 14:18:39

电源管理子系统耗电量服务

2022-06-20 18:10:49

盛业ESG

2022-06-07 11:01:56

人工智能AI技术大会

同话题下的热门内容

就因为QQ登录二维码,全网发生了大规模的社死京东618广告精排百分位AUC提升技术方案APP工厂时代终结了?为啥新晋APP越来越少?QQ又出新BUG,你的密码变成“123456789”了?文本布局性能提升 60%,Inline Text 技术原理与实现B端产品如何做好移动化设计?我总结了这篇实战经验!实测避坑!十个B端组件红黑榜揭秘微信这个限制,终于被两个软件打破了!

编辑推荐

2017年9月编程语言排行榜:Java、C与C++三巨头还能统治排行榜多久?初学者最容易学的六种编程语言CVPR 2017论文解读:特征金字塔网络FPN手把手教你搭建PHP版RabbitMQ消息队列开发环境及Demo实践微信小程序“反编译”实战(一):解包
我收藏的内容
点赞
收藏

51CTO技术栈公众号