User-Profile-Image
hankin
  • 5
  • 首页
  • 关于
  • 主题
  • 影视解析
  • 音乐
  • 归档
  • 留言
  • 分类
    • 后端
    • 前端
    • Python
    • PHP
    • javascript
    • GO
    • CSS
    • AI
  • 页面
    • 关于
    • 归档
    • 留言
    • 视频
      • 视频详情
    • 音乐
  • 友链
    • mango
    • 创造狮
    • 腾讯设计导航
    • coder gzh
    • 风信子博客
    • DIYgod
    • 若志奕鑫
    • 吾柯
    • 元气秋刀鱼
    • wordpress 大学
    • 守望轩-宁静雅致的小轩馆
    • 主题猫
    • 主题喵
    • kam
    • 大海看看
    • wp2
    • CrazyCodes
    • 枫瑞博客
Help?

Please contact us on our email for need any support

Support
Hankin
刷新页面会随机【个人信息流样式】
28文章    103获赞    41评论    6.1万+浏览
世界那么大,我想去看看。但钱包那么小,哪也去不了。所以,珍惜当下,享受生活。
28岁 IP: 杭州 家里蹲大学
  • 首页
  • 关于
  • 主题
  • 影视解析
  • 音乐
  • 归档
  • 留言
    首页   ›   前端   ›   CSS   ›   正文
CSS

解决移动设备上的所有浏览器顶部都有地址栏,导致高度问题

2024-07-19 09:26:44
671  0 0

解决此问题的最佳方法是什么。显然,移动设备上的所有浏览器顶部都有一个 UI(地址栏等)。这为视口增加了额外的高度,因此我使用 100vh 的网站缺少一个部分。
因此,我假设不同的浏览器具有不同大小的视口,我可以简单地执行类似 height: calc(100vh – 50px) 之类的操作,或者高度是多少,但它不会在所有移动浏览器上匹配,对吧?

//通常 100vh 高度将解释调整后的高度,这就是为什么当浏览器的地址栏向下滑动时有时您会看到移动页面变得时髦的原因。
//对于不考虑 vh 单元中的滑动条的浏览器:地址栏的高度在浏览器中不会保持不变,所以我建议不要附加 -50px .
//尝试使用 window.innerheight 属性设置页面的高度(使用 javascript)。
function adjustHeight() {
    // alert("宽度:"+window.innerWidth+"高度:"+ window.innerHeight)
    var vh = window.innerHeight;
    document.getElementById('messageContent').style.height = (vh - 50) + 'px'; // 假设地址栏高度大约为50px
}
window.addEventListener('resize', adjustHeight);
window.addEventListener('load', adjustHeight);

评论 (0)

点击这里取消回复。

欢迎您 游客  

Hankin
刷新页面会随机【个人信息流样式】
28文章    103获赞    41评论    6.1万+浏览
世界那么大,我想去看看。但钱包那么小,哪也去不了。所以,珍惜当下,享受生活。
28岁 IP: 杭州 家里蹲大学
  • 首页
  • 关于
  • 主题
  • 影视解析
  • 音乐
  • 归档
  • 留言
免费开源smarty_hankin v2.0重构版

wordpress版本:6.0+

PHP版本:7.0~8.0

gitee源码仓库地址:点击打开

github源码仓库地址:点击打开

最新源码地址:待更新

加QQ群入口:1018842166

WP开源主题 smarty_hankin

随机文章
PHP使用无头浏览器如何帮助数据提取和抓取
10个月前
js 引入vconsole
9个月前
fastadmin appendfieldlist 用法
9个月前
php 操作cookie值
6个月前
集成微信分享功能(微信朋友圈、微信朋友、QQ、微博等)
1年前
Copyright © 2025 网站备案号: 浙ICP备20002401号-4
smarty_hankin 主题. Designed by hankin
主页
页面
  • 关于
  • 归档
  • 留言
  • 视频
    • 视频详情
  • 音乐
博主
hanhanjun888@163.com
hanhanjun888@163.com 管理员
hankin
28 文章 29 评论 61215 浏览
测试
测试