h5移动端页面计算高度

最新推荐文章于 2023-07-19 14:19:39 发布
最新推荐文章于 2023-07-19 14:19:39 发布
阅读量2.9k 收藏 2
点赞数 2
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47190975/article/details/126494372
版权

h5移动端在计算高度方面跟小程序有点区别,因为浏览器的头部和底部存在搜索栏和导航栏,所以不能跟小程序一样使用100vh去计算高度,而应该使用浏览器的可视区域（也就是整个屏幕减掉上下两个红色框的高度）,用这个高度去作为计算的总值,也就是小程序里面的100vh。

1.首先需要获取浏览器的可视区域高度

const seeHeight = window.innerHeight

2.使用浏览器的可视区域高度去剪掉上下两块的高度就行了,计算高度在我往期的文章中有提及,不清楚的可以结合我往期的文章进行操作

 

卯足劲往前冲
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
手机页面获取屏幕高度那些事
natalie86的专栏
01-25 1万+
在做移动端页面的时候，经常会遇到需要获取屏幕的高度和宽度，进行一些特殊效果的处理或者兼容。比如在做全屏滑动上下翻页的效果（不出现滚动条），这种就需要页面加载时获取到屏幕的高度，然后才能定义，每一屏的高度。以前做pc页面时，才会说这个高度的获取会有兼容问题，clientHeight、offsetHeight 和scrollHeight的各种讨论和兼容处理已经很多了。但是在移动端，主要还是考虑webk
关于uni-app开发H5端和app端页面高度计算问题
最新发布
拥抱星星的月亮的博客
08-14 661
需求是消息只需要在内容区域滚动，而且适配H5和APP。uni-app好像在app端flex:1并没用，至少我这边真机运行是这种情况，所以，这边使用了条件渲染语法，在H5端内容区域flex:1,而在app端如下，通过uni.getSystemInfoSync()获取屏幕高度然后减去topbar和如下计算出来的“搜索”的高度。如上这么处理，页面高度无论在哪种机型上都正常。
h5获取页面高度 ios 安卓端
woshenmew的博客
06-15 2051
# 安卓端 使用 uni.getSystemInfoSync().windowHeight 因为uni.getWindowInfo().windowHeight 高度有问题# 在web端# statusBarHeight 状态栏高度# windowBottom TabBar高度# windowTop 导航栏高度# safeArea.height 安全区域高度 （ios下方 返回按钮栏下方有个安全区域，防止误触home横线）...
H5+获取状态栏高度
Tingting_Wang152的博客
07-01 4641
获取状态栏高度： plus.navigator.getStatusbarHeight()
H5手机端JS常用屏幕宽度和高度获取方法
hotlinhao的专栏
07-10 6517
js获取手机屏幕宽度、高度 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.
关于h5页面内嵌到app，并悬浮隐藏顶部原生导航栏后获取不到状态栏高度的问题，解决方案如下：
qq_31666019的博客
07-19 625
h5内嵌到原生app，隐藏顶部导航栏，h5获取不到顶部导航栏高度问题
详解H5 活动页之移动端 REM 布局适配方法
09-27
通过动态计算html的font-size，并将设计稿尺寸转换为REM单位，开发者可以创建出高度一致且适应各种屏幕尺寸的H5活动页。而针对PC端的适配，开发者可能需要额外的调整，例如添加媒体查询或者使用其他适应PC屏幕的布局...
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
10-19
在JS移动端和H5开发中，常常需要处理用户选择的图片上传，特别是在移动设备上，这一需求更加普遍。本文将详细介绍如何实现同时选择多张图片并利用canvas进行压缩上传的流程。 首先，HTML5提供了`...
mobileAdapt:移动端加载h5页面适配
05-29
移动端加载h5页面适配，实现swiper图片轮播使用任意尺寸手机屏幕，同时图片宽高也是可以任意指定，不采用@media()标签。 在浏览器模式下，加载的页面能够自由变换长宽而让页面保持适配，但是在移动端却会由于不同...
js实现移动端H5页面手指滑动刻度尺功能
09-28
总之，通过JavaScript，我们可以构建一个具有高度定制性和良好交互体验的移动端H5页面手指滑动刻度尺组件。在实际开发中，需要关注滑动的精度、动画效果和用户反馈，以确保组件的易用性和准确性。
手摸手，带你实现移动端H5瀑布流布局.doc
07-08
JS + 懒加载方法是实现移动端瀑布流布局的另一种方法，主要思路是先将第一行排满，计算第一行的所有图片高度，将第二行第一张图放在第一行最矮的图片后面，然后进行下一步骤，重新计算当前所有列高度，避免步骤2添加...
关于H5 （自定义界面 的高度计算） CSS/CSS3 变量var()使用 以及 calc()函数计算的使用
weixin_45379180的博客
05-31 809
最近新喜欢上了css中的var以及calc()函数,这可以在不使用less或者scss的情况下实现变量以及函数的使用,在此记录一下。我们可以在root或者任何一个我们想要使用的变量语法的层级中定义var()变量并进行使用。var变量的定义语法 : - -变量名 两个短横线加上变量名。var变量的使用 : var(- -变量名)
小程序/H5固定单页面展示（长短屏自适应，不出现滚动条）的适配方案
劲枫的博客
03-11 2141
场景描述： 在开发小程序、H5中，可能存在需要在各种长短屏下都一个页面展示内容，不出现滚动条的场景。 我们知道宽度的话按照设计稿750计算，大家基本没啥问题，H5就是750rem，小程序用750rpx，对吧，什么屏幕都能适配全屏。但是高度怎么办呢？ 方案介绍： 此种方案中，必须有些可缩放元素存在：一张图片；其他部分如：底部按钮、底部文字、底部介绍等元素不能缩放。 此时可以利用750/windowWidth计算一个比率。 然后对于适配图片的处理方式是，1、计算设计稿中，不可缩放元素的高度；2.
uniapp H5顶部状态栏+导航栏高度修改
名人卷耶
01-07 8078
1、导入uniapp自定义导航栏 传送门 导入之后，打开官方查件 uni-nav-bar，修改官方给出的插件高度是44px，并且放到了类 uni-navbar__header 里面。 $nav-height: 55px; // 将 44 改成你最合适的数字 我的是 55 .uni-navbar__header { /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex-direction: row; wid
移动端获取当前屏幕的高度_手机移动端屏幕宽高详解
weixin_30229479的博客
12-30 4931
### 前因目前的移动端布局，以响应式布局居多，以适应在不同分辨率的屏幕，实现布局的方式可能有很多种，但是不管使用哪种方式，获取设备的可用宽高就能为问题的关键。### 宽高的获取“`document.documentElement.clientWidthdocument.documentElement.clientHeightdocument.body.clientWidthdocument.bo...
APP里引用H5页面时，高度设置引起的底部白边等问题
m0_63108819的博客
04-06 2470
H5页面在app里的常见问题： 1.当H5页面高度设置为100%，设置背景色时，发现高度有内容撑开，背景色没有铺满整个背景。 2.当H5页面高度设置为100vh，设置背景色时，背景设能铺满，但是上拉时底部有白边。 3.当H5页面高度设置为最小高度为 100%或100vh，内容超出屏幕高度，上拉有调取接口时，有卡顿现象。 解决方法： 　　可以在父元素设置：　 overflow-y: auto; position: fixed; left: 0; ...
js获取手机屏幕宽度、高度
热门推荐
唐策的博客
07-03 2万+
js获取手机屏幕宽度、高度 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body...
html如何自动获取屏幕高度,css如何获取屏幕高度？
weixin_39769767的博客
06-02 1205
css可以使用calc()函数来获取屏幕高度，通过css设置元素高度为calc(100vh)即可使元素高度为屏幕高度。calc()函数用于动态计算长度值。css可以使用calc()函数通过相对长度来获取屏幕高度。相对长度：相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。em 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16...
键盘高度获取 h5移动端
06-08
要获取移动端键盘的高度，可以使用以下代码： ```javascript let screenHeight = window.screen.height; // 获取屏幕高度 let inputElement = document.activeElement; // 获取当前激活的输入框元素 let ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值