h5移动端页面计算高度

最新推荐文章于 2024-08-27 14:32:45 发布
最新推荐文章于 2024-08-27 14:32:45 发布
阅读量3.3k 收藏 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.使用浏览器的可视区域高度去剪掉上下两块的高度就行了,计算高度在我往期的文章中有提及,不清楚的可以结合我往期的文章进行操作

 

H5 宽高自适应学习笔记
weixin_46589032的博客
03-31 1344
宽高自适应 第一节：宽的自适应 width:100%;或者是width不去设置，子元素宽度跟随父元素。 第二节：高度自适应 （高度不去设置，或者高度设置auto -> 内容撑开父元素的高度） ...
H5移动端适配（2）
jdpopdmy的博客
02-01 1077
layoutviewport 布局视口: 大于实际屏幕， 元素的宽度继承于 layoutviewport，用于保证网站的外观特性与桌面浏览器一样。idealviewport 理想视口: 为浏览器定义的可完美适配移动端的理想 viewport，固定不变，可以认为是设备视口宽度。)：当我们以百分比来指定一个元素的大小时，它的计算值是由这个元素的包含块计算而来的。当用户对浏览器进行缩放时，不会改变布局视口的大小，所以页面布局是不变的，但是缩放会改变视觉视口的大小。：获取浏览器窗口外部的高度。
关于uni-app开发H5端和app端页面高度计算问题
拥抱星星的月亮的博客
08-14 1106
需求是消息只需要在内容区域滚动，而且适配H5和APP。uni-app好像在app端flex:1并没用，至少我这边真机运行是这种情况，所以，这边使用了条件渲染语法，在H5端内容区域flex:1,而在app端如下，通过uni.getSystemInfoSync()获取屏幕高度然后减去topbar和如下计算出来的“搜索”的高度。如上这么处理，页面高度无论在哪种机型上都正常。
H5获取屏幕的宽度和高度
RisaSama的博客
06-05 4481
H5获取屏幕的宽度和高度 通过JS获取 window.screen.availWidth 返回当前屏幕宽度(空白空间) window.screen.availHeight 返回当前屏幕高度(空白空间) window.screen.width 返回当前屏幕宽度(分辨率值) window.screen.height 返回当前屏幕高度(分辨率值) window.document.body.offsetHeight
H5手机端JS常用屏幕宽度和高度获取方法
hotlinhao的专栏
07-10 7315
js获取手机屏幕宽度、高度 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.
H5页面获取屏幕宽高
BubbleABC的博客
08-11 2767
H5页面获取屏幕宽高
移动端屏幕高度计算表
weixin_30835933的博客
04-29 304
今天终于有机会做了一个移动端页面，和机型测试，效果的几个页面都要在手机单屏显示，然后...这么多不同机型的调试就开始了（哭）：下面是几个主流尺寸（或许吧）的计算，通过屏幕截图的方式计算的，其实我也很奇怪呜呜~~先来一张截图说明一下什么是系统默认头部（我喜欢怎么说就怎么说吧），屏幕截图质量不甚好，ps测量大概咯，能说明问题即可。 (iPhone 4屏幕截图：) 如果不清楚手...
谈谈 H5 移动端适配原理
jnfy的博客
08-27 951
H5 移动端开发的必不可少的一个环节就是移动端网页的适配，因为UI通常只会提供大小固定的设计稿，而各种不同移动设备具有不同的页面分辨率和大小，所以适配的目的就是让一份设计稿在不同移动设备上表现出一致性。 虽然现如今各种插件都可以帮助我们快速配置完成，例如lib-flexible、postcss-pxtorem、postcss-px-to-viewport等等，但不少小伙伴在被问及相关原理时却很难说清楚，那么本篇文章我们就一起来探究一下其中原理吧！！！
详解移动端h5页面根据屏幕适配的四种方案
11-21
在移动端H5页面开发中，适配屏幕是一个重要的任务，以确保内容在不同尺寸和分辨率的设备上都能正常显示。以下将详细介绍四种常见的适配方案： ### 方法一：引入淘宝开源的可伸缩布局方案（lib-flexible） 淘宝的可...
H5移动端上滑加载，带ajax异步请求后台数据，拿来即用
01-31
2. 检测滚动位置：在滚动事件的回调函数中，计算滚动条的位置和页面高度，判断是否达到页面底部。 3. 发起Ajax请求：当到达底部时，构造并发送Ajax请求，包含必要的参数如分页信息。 4. 处理响应数据：收到服务器...
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
10-19
在JS移动端和H5开发中，常常需要处理用户选择的图片上传，特别是在移动设备上，这一需求更加普遍。本文将详细介绍如何实现同时选择多张图片并利用canvas进行压缩上传的流程。 首先，HTML5提供了`...
H5页面的高度宽度100%
weixin_34163553的博客
04-17 3105
解决方案1: 设置如下:html,body{ min-height:100vh; background-color:#fff; }这样高度首先不会写死,而且满足最小高度是满屏 解决方案2: 可以用vh和vw来布局。100vh和100vw就是你设备的高度和宽度。先把外面盒子固定下来，所有的盒子的高度加起来等于100vh刚好占满一屏这样就不会有空白。像你这种盒子比较少的可以用js获取设备的...
html 关于获取页面高度方法
xiaozaq的博客
09-07 2209
返回整个屏幕的像素高度，即分辨率高度。如常见的pc系统分辨率是1920*1080，那么返回的值就是1080。对应window.screen.width返回就是1920。即window.outerHeight-页签高度 - 地址栏高度 - 书签栏高度。如果是chrome浏览器模拟手机的话，返回的就是模拟的手机分辨率，与电脑分辨率无关。返回 window.screen.height - 任务栏高度。一般我们页面中希望获取到的就是window.innerHeight。浏览器高度，包含了地址栏、书签栏等高度。
手机页面获取屏幕高度那些事
热门推荐
natalie86的专栏
01-25 1万+
在做移动端页面的时候，经常会遇到需要获取屏幕的高度和宽度，进行一些特殊效果的处理或者兼容。比如在做全屏滑动上下翻页的效果（不出现滚动条），这种就需要页面加载时获取到屏幕的高度，然后才能定义，每一屏的高度。以前做pc页面时，才会说这个高度的获取会有兼容问题，clientHeight、offsetHeight 和scrollHeight的各种讨论和兼容处理已经很多了。但是在移动端，主要还是考虑webk
H5 实时获取滚动条高度
weixin_43971788的博客
08-05 440
【代码】H5 实时获取滚动条高度。
jQuery 获取屏幕高度、宽度
LYBWWP
12-11 2184
alert($(window).height()); //浏览器当前窗口可视区域高度  alert($(document).height()); //浏览器当前窗口文档的高度  alert($(document.body).height());//浏览器当前窗口文档body的高度  alert($(document.body).outerHeight(true));//浏览器当前窗口文档bo
Js获取屏幕宽度、高度 移动端H5适配
hzxOnlineOk的博客
04-22 4943
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeig
动态计算控件高度和宽度的方法
u010702494的专栏
10-20 839
/*int totalHeight = 0; double count = 2.0; int num = (int) Math.ceil(mDataHelperCurrent .getCountWithImage(mFontMetas) / count); totalHeight = (int) num * (int) (this.getResources().getDimension(
前端动态计算高度
qq_45801301的博客
09-27 178
【代码】前端动态计算高度。
H5移动端如何固定页面头部
最新发布
03-16
### H5移动端实现页面头部固定的CSS方法 在H5移动端开发中，为了实现页面头部固定的效果，通常会使用`position: fixed`来完成这一需求。然而需要注意的是，不同平台（如iOS和Android）对于`fixed`定位的支持可能存在差异[^1]。 以下是通过CSS实现页面头部固定的具体方式： #### HTML结构 ```html <div class="header">头部</div> <div class="content">内容区域</div> ``` #### CSS样式 ```css .header { width: 100%; height: 50px; /* 可根据实际需求调整 */ background-color: #2237fa; color: white; text-align: center; line-height: 50px; /* 垂直居中文本 */ position: fixed; /* 固定定位 */ top: 0; /* 距离顶部为0 */ z-index: 999; /* 确保覆盖其他内容 */ } .content { padding-top: 50px; /* 防止内容被头部遮挡 */ } ``` 上述代码实现了如下效果： - `.header`类设置了`position: fixed`，使其相对于视口固定不动。 - `top: 0`确保头部始终位于屏幕顶部。 - 设置`.content`的`padding-top`属性是为了防止页面内容被固定的头部遮盖。 如果遇到iOS设备上的兼容性问题，可以通过以下方式进行优化： - 使用百分比高度布局替代绝对定位。 - 或者引入JavaScript动态计算并设置头部的位置。 --- ### 关于过渡动画的应用 如果有需要让头部或其他元素具备平滑的交互体验，可以利用`transition`属性定义变化过程中的过渡效果[^2]。例如： ```css .header { transition: all 0.3s ease-in-out; } /* 当鼠标悬停时改变颜色或尺寸 */ .header:hover { background-color: blue; } ``` 此部分代码可以让头部在用户操作过程中呈现更自然的变化效果。 --- ### 文字微调技巧 针对某些特殊场景下文字位置不对齐的情况，可通过修改伪元素的`margin`值来进行细微调整[^3]。例如： ```css .user::before { content: '>'; margin: -2px auto 0; /* 微调垂直方向位置 */ } ``` 这种做法适用于需要精确控制视觉表现的小范围修正。 --- ### iOS背景附件支持注意事项 值得注意的是，在一些苹果设备上可能出现`background-attachment: fixed`失效的现象[^4]。因此建议开发者测试具体功能时考虑备用方案或者采用图片代替纯色渐变等方式规避潜在风险。 --- ####
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值