开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js获取移动端屏幕高度

在JavaScript中，获取移动端屏幕高度是一个常见的需求，尤其是在开发响应式网站和应用时。以下是一些基础概念和相关方法：

基础概念

视口（Viewport）：浏览器窗口中用于显示网页内容的区域。
屏幕高度：设备屏幕的垂直尺寸。

获取屏幕高度的方法

1. 使用 `window.innerHeight`

window.innerHeight 返回浏览器窗口的内部高度，包括滚动条。

const screenHeight = window.innerHeight;
console.log(screenHeight);

2. 使用 `screen.height`

screen.height 返回设备屏幕的总高度。

const screenHeight = screen.height;
console.log(screenHeight);

3. 使用 `document.documentElement.clientHeight`

document.documentElement.clientHeight 返回HTML文档的可视区域高度。

const screenHeight = document.documentElement.clientHeight;
console.log(screenHeight);

优势与应用场景

响应式设计：根据屏幕高度调整布局和元素大小。
适配不同设备：确保应用在不同尺寸的设备上都能良好显示。
滚动事件处理：结合滚动事件，实现动态效果或交互。

可能遇到的问题及解决方法

问题1：获取的高度不准确

原因：可能是因为页面加载时DOM还未完全渲染，或者存在异步加载的内容。

解决方法：使用 window.onload 或 DOMContentLoaded 事件确保DOM完全加载后再获取高度。

window.onload = function() {
    const screenHeight = window.innerHeight;
    console.log(screenHeight);
};

问题2：屏幕旋转后高度未更新

原因：设备旋转后，浏览器可能不会立即更新视口尺寸。

解决方法：监听 resize 事件，动态更新高度。

window.addEventListener('resize', function() {
    const screenHeight = window.innerHeight;
    console.log(screenHeight);
});

示例代码

以下是一个综合示例，展示了如何在页面加载和屏幕旋转时获取准确的屏幕高度：

function getScreenHeight() {
    return window.innerHeight;
}

window.onload = function() {
    console.log('Screen height on load:', getScreenHeight());
};

window.addEventListener('resize', function() {
    console.log('Screen height on resize:', getScreenHeight());
});

通过这些方法，你可以有效地获取并处理移动端屏幕高度，确保你的应用在不同设备上都能提供良好的用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js获取网页屏幕可视区域高度

document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth...==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度看了以上代码，可能会有疑问说body和可见区域到底有什么不同呢，我们在console...以下是兼容主流浏览器（IE/Firefox/Chrome/Safari）获取浏览器窗口可视区域（不包括滚动条）和滚动条位置的代码： ? ?...1 // 获取浏览器窗口的可视区域的宽度 2 function getViewPortWidth() { 3 return document.documentElement.clientWidth...|| document.body.clientWidth; 4 } 5 6 // 获取浏览器窗口的可视区域的高度 7 function getViewPortHeight() { 8

9.5K1 0

JavaScript 获取屏幕的高度和宽度

screen.width:显示浏览器的屏幕的宽度 screen.Height:显示浏览器的屏幕的高度 screen.availWidth：显示浏览器的屏幕的可用宽度 screen.availHeight...:显示浏览器的屏幕的可用高度（这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。）

7.2K2 0

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度

：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth...HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...： window.screen.height 屏幕分辨率的宽： window.screen.width 屏幕可用工作区高度： window.screen.availHeight 屏幕可用工作区宽度： window.screen.availWidth...else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度

8.1K3 0

metahandler.js——移动端适配各种屏幕无痛工具脚本

移动端H5知识[系列] - 固定像素的实现方法 HTML5学堂：随着对移动端的探索，而今我们逐渐形成了“横向百分比，纵向rem”。...日前看网易对移动端的操作，发现网易的lofter采用了固定像素进行制作。今天我们就来剖析一下这种方法。...这次HTML5学堂的移动端官网，我们也采用了这种方法。使用的基本框架主要使用的基本框架是：MetaHandler.js。...大家可以点击此处下载——“下载MetaHandler.js”,提取密码为：9074，也可以直接复制下面的代码。 !...而且目前移动端使用谷歌浏览器的人也很少，所以个人感觉这个bug是可以忽略的。

2K11 0

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度（转）

：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度...window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度... offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...： window.screen.height 屏幕分辨率的宽： window.screen.width 屏幕可用工作区高度： window.screen.availHeight 屏幕可用工作区宽度...window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; //获取窗口高度

16.2K1 0

JavaScript、Jquery获取屏幕的宽度和高度

在日常的项目中经常需要获取屏幕的宽度或者高度，简单记录一下： Javascript方法获取： document.body.clientWidth //网页可见区域宽 document.body.clientHeight...document.body.scrollLeft //网页被卷去的左 window.screenTop //网页正文部分上 window.screenLeft //网页正文部分左 window.screen.height //屏幕分辨率的高...window.screen.width //屏幕分辨率的宽 window.screen.availHeight //屏幕可用工作区高度 window.screen.availWidth //屏幕可用工作区宽度...JQuery方法获取： ($(window).height()); //浏览器当前窗口可视区域高度 ($(document).height()); //浏览器当前窗口文档的高度 ($(document.body...).height());//浏览器当前窗口文档body的高度 ($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding

5.3K0 0

js获取各种高度总结

在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。抽空整理了我自己常用到的，时间仓促，没有考虑到万恶的IE浏览器。。。。...获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height window.screen.width 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight...window.screen.availWidth 网页全文的高度和宽度： document.body.scrollHeight document.body.scrollWidth 滚动条卷上去的高度和向右卷的宽度...： document.body.scrollTop document.body.scrollLeft 网页可见区域的高度和宽度（不加边线）： document.body.clientHeight document.body.clientWidth...网页可见区域的高度和宽度（加边线）： document.body.offsetHeight document.body.offsetWidth

12.6K2 0

移动端页面按手机屏幕分辨率自动缩放的js

，在页面头部加入以上一段js之后，在手机端就可以正常显示了， var phoneScale = phoneWidth/750; 除以的为设计图设计的页面宽度，750是按iphone6来设计（根据自己使用需求来修改...），即让页面的放大比率=屏幕的逻辑分辨率/物理分辨率，从而达到适应手机的效果。...phys.width通过document.documentElement.clientWidth; 而获取css-width通过 window.screen.width获取。...试想，浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上，势必会放不下，手机端横向会出现滚动条，怎么阻止这种情况呢，很简单，浏览器默认一个虚拟窗口，不同浏览器有不同的虚拟窗口宽度的默认值如...target-densitydpi=device-dpi可以强制内核以480DPI排版，使画面更精细，window.innerwidth也将为屏幕宽度1080.

5.5K8 0

【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )

一、移动端浏览器 ---- 移动端浏览器比 PC 端浏览器发展要晚 , 使用的技术比较新 , 对 HTML5 + CSS3 支持较好 , 常见的浏览器如下 : UC / QQ / Opera / Chrom.../ 360 / 百度 / 搜狗 / 猎豹国内的浏览器基本都是根据 Webkit 内核进行修改而来的 , 目前没有自主研发的内核 , 因此移动端开发适配比较简单 , 兼容主流的浏览器 , 即兼容...Webkit 内核浏览器即可 ; 二、移动端屏幕分辨率 ---- 移动设备的尺寸类型非常多 , Android / iOS 手机分辨率种类很多 , 参考 Android 屏幕适配专栏 ; 【Android...屏幕适配】屏幕适配基础概念 ① ( Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI ) 博客 ; 前端开发时 , 不需要关注上述屏幕像素密度 dpi , 密度无关像素 dp..., 只需要关注像素尺寸 px 即可 ; 三、移动端网页调试方法 ---- 使用 Chrom DevTools 谷歌浏览器开发工具模拟手机调试 ; 使用 360 极速浏览器也可以使用该开发工具 ; 进入浏览器

2.6K4 0

移动端禁止遮罩层以下屏幕滑动

当做弹窗效果时，希望弹窗出现的时候网页不可再上下滚动、翻页，可以用body{overflow:hidden}，可是做手机站的时候，就不兼容了。

1.5K1 0

js判断移动端和pc端

//判断是手机端还是pc端 function isPc(){ if(window.navigator.userAgent.match(/(phone|pad|pod...MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) { return true; // 移动端...}else{ return false; // PC端 } }

10.8K6 1

js网页如何获取手机屏幕宽度

document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高...：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth

10.9K3 0

js移动端中touch事件

触摸事件是在移动设备(如智能手机或平板电脑)上查看页面时触发的事件。它们允许您跟踪多点触摸事件。...我们有4个触摸事件: touchstart 触摸事件已经启动(触摸表面) touchend 一个触摸事件已经结束(表面不再被触摸) touchmove 触摸移动手指(或任何接触设备的东西)在表面移动 touchcancel...clientX / clientY 无论是否滚动，鼠标指针相对于浏览器窗口的x和y坐标 screenX / screenY 屏幕坐标中鼠标指针的x和y坐标 pageX / pageY 页面坐标(包括滚动

8.9K2 0

【Android 屏幕适配】屏幕适配通用解决方案 ③ ( 自定义组件解决方案 | 获取设备状态栏高度 | 获取设备屏幕数据 )

文章目录一、获取设备状态栏高度二、获取设备屏幕数据参考文档 : 设备兼容性概览屏幕兼容性概览支持不同的像素密度声明受限屏幕支持上一篇博客【Android 屏幕适配】屏幕适配通用解决方案...布局 , 需要完成如下操作 : 首先 , 要获取到实际的设备屏幕数据 , 如手机屏幕实际宽高 , 屏幕像素密度 DPI 等数据 ; 然后 , 计算实际设备的宽高 , 扣掉状态栏的高度 , 不同手机设备状态栏高度不同...DisplayMetrics 示例对象 , 其中封装了设备真实的屏幕数据参数 ; 通过 DisplayMetrics # heightPixels 可以获取屏幕高度 , 通过 DisplayMetrics...().getMetrics(displayMetrics); 再后 , 获取手机状态栏高度 ; // 获取状态框高度 int statusBarHeight...= getDimenValue(context,48); 最后 , 处理状态栏信息 , 如果是横屏 , 在宽度方向上减去状态栏高度 , 如果是竖屏 , 在高度上减去状态栏高度 ; 这里通过对比屏幕的宽高来判定当前是横屏还是竖屏

9781 0

移动端布局伸缩、设置div高度等比例缩放

问题描述首先写一个移动端布局的div出来看看，示例如下： ? 随着移动端的屏幕大小，div的布局宽度是设置100%，所以可以跟着变化。...但是高度是固定写了10rem的高度，这样是无法随着宽度变化进行等比例变化的。 ?...那么解决这个问题的关键就是，因为高度是使用rem单位设置的，只要随着屏幕的宽度变化，设置html的font-size大小变化，就可以控制高度的变化。...可以看到，随着宽度变化，高度也相应有了变化了。示例完整代码如下 <!...window.addEventListener('resize',calc); })(); 移动端高度等比例问题

2.5K2 0

移动端Web App 的屏幕适配方法(总结)

移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。...03 响应式做法响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性难，所以一般都是中小型的门户或者博客类站点会采用响应式的方法从web page到web...，特别是加载图片资源为了兼顾移动端和PC端各自响应式的展示效果，难免会损失各自特有的交互方式 04 viewport 缩放在写页面时，直接使用px, 将页面写死。...important; } } 07 vw和vh 页面中所有的关于大小的设置，都需要以屏幕的大小为准，进行计算，相对复杂 vw和vh是相对于视口的宽度/高度，即： 100vw = 视口的宽度...100vh = 视口的高度总结：关于移动端的适配方法，就总结到这里，欢迎大家参与讨论

1.5K1 0

移动端页面如何优雅的适配各种屏幕，包括PC端

本文为Varlet组件库源码主题阅读系列第八篇，读完本篇，可以了解到移动端页面如何适配各种尺寸的屏幕，包括pc端，另外如何将触摸事件转换成鼠标事件。...移动端适配开发移动端页面，我们通常都会按照一个固定宽度的设计稿来做，但是实际上的手机屏幕尺寸五花八门，如果不进行适配的话会比较影响使用体验。...Varlet组件库的设计就是基于375px宽度的设计稿，然后使用postcss-px-to-viewport进行移动端适配，这个PostCSS插件会将px单位转换成vw单位，1vw等于1/100的视口宽度...桌面端适配这个适配指的不是尺寸，因为前面已经使用vw解决了尺寸的适配问题，这里主要是指事件，具体来说是我们在移动端使用的交互事件一般是touch事件，但是桌面端肯定不支持，所以为了让我们的移动端组件库不至于在桌面端完全无法使用...targetTouches：当前对象上所有触摸点的列表 changedTouches：涉及当前(引发)事件的触摸点的列表移动端触摸点是可能存在多个的，比如我同时好几个手指一起触摸，可以通过这三个列表进行区分

2.1K2 0

js 判断当前是移动端还是PC端

源代码：https://gitee.com/miofly/resources // 移动端兼容 ;var adaptive={};(function(f,g){var h=f.document;var...=750;window['adaptive'].scaleType=1;window['adaptive'].init();; function isPc () { // 判断是移动端还是...PC端 var _$=["Win", "Mac", "X11"]; var is_win=navigator["platform"]["indexOf"](_$[0])==0;...'PC端' : '移动端')

11.2K4 0

深入浅出之移动端屏幕适配（1）

说到移动端：可以根据开发技术分，也可以根据操作系统来分，今天重点不是这个，是讲下使用CSS与Android如何进行屏幕适配。 1.先来了解几个概念：CSS中的px,em,rem分别是啥东西？...屏幕尺寸：一般听到说手机4.7英寸或者5.2英寸，屏幕对角线的长度，这里还要说明下：1英寸(in)=2.54厘米(cm)，因此上面的4.7*2.54=11.93cm。...屏幕比例：对角线长度固定但长宽的长度是不确定的，因此有不同的比例。...其实根据上面讲的几点：屏幕分辨率480*800，屏幕尺寸4英寸，已经可以计算了，(480/4^2)+(800/4)^2开平方根; 那么density的值应该为233/160=1.46 px要怎么算？...参考：dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算

1.1K10 0

Android 获取屏幕高宽度，密度，通知栏高度，截图等常用方法

https://blog.csdn.net/lyhhj/article/details/49105255 分享一下Android中常用的一些辅助方法：获取屏幕高度： /** * 获得屏幕高度...wm.getDefaultDisplay().getMetrics(outMetrics); return outMetrics.widthPixels; } 获取屏幕宽度...： /** * 获取屏幕密度 * @param context * @return * by Hankkin at:2015-10-07 21:16:29...final float scale = getScreenDensity(context); return (int) (px * scale + 0.5); } 获取状态栏高度...： /** * 获取当前屏幕截图，包含状态栏 * @param activity * @return * by Hankkin at:2015-10-07 21

2.2K2 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭