AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

iOS Safari 浏览器 100vh 带有滚动条解决方案

2023-08-02 648
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： iOS Safari 浏览器 100vh 带有滚动条解决方案

问题场景

在移动端 safari 或者 chrome 浏览器中，使用 100vh，会出现滚动条。

根本原因

在 safari 和 chrome 浏览器中，100vh 是指去掉地址栏的高度，所以会出现滚动条。

解决方案

移动端一般不考虑 chrome 浏览器，用户基数小，如果只考虑微信公众号开发也不用考虑这个问题。如果需要考虑 safari 浏览器的用户体验，建议使用 100% 替代 100vh，或者使用 js，而不是 100vh。

文章标签：
JavaScript
iOS开发
UED
Web App开发
关键词：
iOS解决方案
浏览器ios
浏览器safari
浏览器解决方案
浏览器滚动条
卡尔特斯
目录
相关文章
shuj
|
1月前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案：Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上，安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择：是专注于单一平台深耕细作，还是寻找一种能够横跨两大系统的开发方案？Flutter，作为一种新兴的跨平台UI工具包，正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟，从Flutter的基础概念到实战应用，深入浅出地介绍这一技术的魅力所在。
shuj
80 7
天下无贼001
|
2月前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台解决方案
【9月更文挑战第27天】在移动应用开发的广阔天地中，安卓和iOS两大操作系统如同双子星座般耀眼。开发者们在这两大平台上追逐着创新的梦想，却也面临着选择的难题。如何在保持高效的同时，实现跨平台的开发？本文将带你探索跨平台开发的魅力所在，揭示其背后的技术原理，并通过实际案例展示其应用场景。无论你是安卓的忠实拥趸，还是iOS的狂热粉丝，这篇文章都将为你打开一扇通往跨平台开发新世界的大门。
天下无贼001
61 8
职说测试
|
3月前
|
测试技术 开发工具 iOS开发
iOS自动化测试方案(三)：WDA+iOS自动化测试解决方案
这篇文章是iOS自动化测试方案的第三部分，介绍了在没有MacOS系统条件下，如何使用WDA（WebDriverAgent）结合Python客户端库facebook-wda和tidevice工具，在Windows系统上实现iOS应用的自动化测试，包括环境准备、问题解决和扩展应用的详细步骤。
职说测试
264 1
iOS自动化测试方案(三)：WDA+iOS自动化测试解决方案
郏国上
|
6月前
|
存储 Android开发 iOS开发
iOS不支持HEIC格式的图片显示和标签函数显示问题及解决方案
iOS不支持HEIC格式的图片显示和标签函数显示问题及解决方案
郏国上
208 0
奔跑的数据
|
3月前
|
数据采集 Web App开发 测试技术
使用Selenium调试Edge浏览器的常见问题与解决方案
在互联网数据采集领域，Selenium常用于自动化网页爬取。针对使用Edge浏览器时遇到的启动远程调试失败、访问受限及代理IP设置等问题，本文提供了解决方案。通过特定命令启动Edge的远程调试模式，并利用Python脚本配合Selenium库，可实现代理IP、User-Agent的设定及Cookie管理等高级功能，有效提升爬虫稳定性和隐蔽性。遵循步骤配置后，即可顺畅执行自动化测试任务。
奔跑的数据
797 1
使用Selenium调试Edge浏览器的常见问题与解决方案
请看我回答~
|
3月前
|
前端开发 开发工具 Android开发
探索安卓与iOS应用开发：跨平台解决方案的崛起
【8月更文挑战第27天】在移动设备日益普及的今天，安卓和iOS系统占据了市场的主导地位。开发者们面临着一个重要问题：是选择专注于单一平台，还是寻找一种能够同时覆盖两大系统的解决方案？本文将探讨跨平台开发工具的优势，分析它们如何改变了移动应用的开发格局，并分享一些实用的开发技巧。无论你是新手还是资深开发者，这篇文章都将为你提供有价值的见解和建议。
请看我回答~
52 2
游客qf4jmczx4xu2y
|
3月前
|
前端开发 JavaScript Android开发
探索Android和iOS开发中的跨平台解决方案
【8月更文挑战第1天】随着移动应用市场的不断扩张，开发者面临一个共同的挑战——如何高效地为多个平台创建和维护应用程序。本文将深入探讨跨平台开发工具，特别是Flutter和React Native，通过比较它们的优势和限制，并辅以实际代码示例，揭示这些工具如何帮助开发者在保持高性能的同时，实现代码的最大化重用。
游客qf4jmczx4xu2y
227 2
请看我回答~
|
3月前
|
前端开发 JavaScript Android开发
安卓与iOS开发中的跨平台解决方案
【8月更文挑战第24天】在移动应用开发领域，安卓和iOS两大平台占据了主导地位。然而，为这两个平台分别开发和维护应用会带来额外的时间和成本。本文将探讨跨平台开发的概念、优势以及流行的跨平台框架，如React Native和Flutter，并分析它们如何解决多平台开发的挑战。
请看我回答~
87 0
郏国上
|
6月前
|
存储 Web App开发 Android开发
iOS不支持WebP格式图片解决方案和iPhone 7及其后硬件拍照的HEIC格式图片
iOS不支持WebP格式图片解决方案和iPhone 7及其后硬件拍照的HEIC格式图片
郏国上
649 1
iOS不支持WebP格式图片解决方案和iPhone 7及其后硬件拍照的HEIC格式图片
朝阳39
|
4月前
|
Web App开发 前端开发
canvas保存图片时，谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时，谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
朝阳39
137 0