开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css获取手机屏幕高度

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过CSS，可以控制网页元素的布局和外观。

获取手机屏幕高度通常涉及到响应式设计，即根据设备的屏幕尺寸调整网页的布局和样式。

相关优势

响应式设计：能够根据不同设备的屏幕尺寸自动调整布局，提供更好的用户体验。
简化开发：通过CSS媒体查询（Media Queries），可以针对不同屏幕尺寸编写不同的样式规则，减少重复代码。
提高性能：合理的CSS布局可以减少页面加载时间，提高页面渲染速度。

类型

媒体查询（Media Queries）：CSS3引入的一种功能，可以根据设备的特性（如屏幕宽度、高度、方向等）应用不同的样式。
视口单位（Viewport Units）：如vh（视口高度的百分比）、vw（视口宽度的百分比）等，可以直接根据视口大小设置元素的大小。

应用场景

移动设备优化：确保网页在手机、平板等移动设备上显示良好。
多屏幕适配：支持不同尺寸和分辨率的屏幕，提供一致的用户体验。
动态布局：根据屏幕大小动态调整页面布局，如导航栏、侧边栏的显示与隐藏。

示例代码

以下是一个使用CSS媒体查询和视口单位获取手机屏幕高度的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取手机屏幕高度</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 使用视口单位设置高度 */
            background-color: #f0f0f0;
        }

        .container {
            text-align: center;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        @media (max-height: 600px) {
            .container {
                font-size: 14px;
            }
        }

        @media (min-height: 601px) and (max-height: 1024px) {
            .container {
                font-size: 16px;
            }
        }

        @media (min-height: 1025px) {
            .container {
                font-size: 18px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>手机屏幕高度示例</h1>
        <p>当前屏幕高度为：100vh</p>
    </div>
</body>
</html>

参考链接

常见问题及解决方法

屏幕高度获取不准确：
- 原因：可能是由于视口单位计算不准确或媒体查询条件设置不当。
- 解决方法：确保使用vh单位时，考虑到浏览器地址栏和工具栏的高度变化。可以使用JavaScript辅助获取准确的屏幕高度。

响应式设计不生效：
- 原因：可能是媒体查询条件设置错误或CSS规则优先级问题。
- 解决方法：检查媒体查询条件是否正确，确保CSS规则没有冲突，可以使用开发者工具调试样式。

通过以上方法，可以有效地获取手机屏幕高度，并根据不同的屏幕尺寸调整网页布局和样式。

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

有帮助

没帮助

相关·内容

JavaScript 获取屏幕的高度和宽度

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

7.2K2 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获取网页屏幕可视区域高度

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

IOS获取手机与屏幕属性

#include #include 2.获取型号 //手机型号。 ...比如： if ([platform isEqualToString:@"iPhone3,1"]) return @"iPhone 4"; 一.UIDevice //设备相关信息的获取 ...//地方型号（国际化区域名称） NSString* phoneModel = [[UIDevice currentDevice] model]; NSLog(@"手机型号...: %@",phoneModel ); //手机型号

1.2K2 0

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获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度

：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth...HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height (需要提一下：CSS...： window.screen.height 屏幕分辨率的宽： window.screen.width 屏幕可用工作区高度： window.screen.availHeight 屏幕可用工作区宽度： window.screen.availWidth

8.1K3 0

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

：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度...window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度... offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...- border clientHeight = height - border offsetWidth = width offsetHeight = height (需要提一下：CSS...： window.screen.height 屏幕分辨率的宽： window.screen.width 屏幕可用工作区高度： window.screen.availHeight 屏幕可用工作区宽度

16.2K1 0

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

文章目录一、获取设备状态栏高度二、获取设备屏幕数据参考文档 : 设备兼容性概览屏幕兼容性概览支持不同的像素密度声明受限屏幕支持上一篇博客【Android 屏幕适配】屏幕适配通用解决方案...② ( 自定义组件解决方案 | 需要解决的问题 : 设计稿坐标数据转为屏幕真实坐标数据 | 实现步骤 ) 中 , 提出如果要实现将宽高为 720 x 1232 的设计稿 , 对应手机屏幕中除状态栏之外的...布局 , 需要完成如下操作 : 首先 , 要获取到实际的设备屏幕数据 , 如手机屏幕实际宽高 , 屏幕像素密度 DPI 等数据 ; 然后 , 计算实际设备的宽高 , 扣掉状态栏的高度 , 不同手机设备状态栏高度不同...DisplayMetrics 示例对象 , 其中封装了设备真实的屏幕数据参数 ; 通过 DisplayMetrics # heightPixels 可以获取屏幕高度 , 通过 DisplayMetrics...().getMetrics(displayMetrics); 再后 , 获取手机状态栏高度 ; // 获取状态框高度 int statusBarHeight

9781 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

CSS解决高度坍塌

什么是高度坍塌默认情况下当父元素不设置高度的时候父元素的高度是靠子元素撑大的，也就是说子元素有多高，父元素就有多高；但是当子元素加了浮动之后，子元素就脱离了文档流，这时候父元素就会发生高度坍塌现象。...先看没有高度坍塌的时候的样式：代码：解决高度坍塌...=edge" /> 解决高度坍塌...=edge" /> 解决高度坍塌

1.6K2 0

获取不同手机浏览器的实际可用高度代码分享

用 js 代码 window.screen.availHeight 可以取屏幕的高度，然后拼凑内容来让页面满屏显示。...但是不同手机浏览器有自己的地址栏、状态栏等，window.screen.availHeight 取到的屏幕高度也包括了这两者，导至本来希望满屏显示的内容出现滚动条，需要滑动才能看到。 ...怎么才能让页面在任何手机浏览器上都能满屏显示呢？...= "number") { //在标准模式下面 if (document.compatMode == "CSS1Compat" ) { pageWidth

2.3K1 0

如何获取屏幕帧率

前言在王小二图解Android【006】高帧率屏幕这期的视频中，我给大家揭秘今年所有安卓旗舰都会吹的高帧率屏幕，其实高帧率屏幕不需要应用开发人员去主动适配，只要应用能在当前的硬件配置下，规定时间（1s.../屏幕帧率）中完成一帧的绘制就可以了。...那肯定有人就要问了，能否当前获得屏幕帧率，然后对高帧率屏幕做针对性优化，在有限的时间内完成一帧的绘制。一、标准SDK接口很简单，只要能够拿到WindowManager就可以获取。...02-26 23:38:01.633 19234 19261 V Kobe : Screen Hz is 59//大概的推测出是60hz的屏幕有没有发现上述代码中的两个细节 1.Choreographer.getInstance...思考如果你们有其他想法可以获得屏幕的帧率，也可以回复留言。

2.2K3 0

JavaScript获取高度和宽度

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

3.7K6 0

Javascript 获取div真实高度

如果你要获取的样式没有相对应的（就像#div1.style.width对应#div1.offsetWidth），就只能分别针对不用浏览器来获取样式表的属性了，可以试着搜索“JS 获取样式属性”之类的。...原文：http://www.cnblogs.com/zhwl/p/3858682.html 实际测试过程中，发现上面获取真实高度是有问题，其实无论是设置在样式表还是在行内设置，都会获取到你设置的值，如果要获取真实高度...：获取真实高度...： alert(parseInt($('.article__content div').get(0).offsetHeight)); 获取时只要在这个样式里面的div大小，这个就是真实高度。...这里还附带其它的获取高度方法 alert($(window).height()); //浏览器当前窗口可视区域高度 alert($(document).height()); //浏览器当前窗口文档的高度

5.1K3 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

adb判断手机屏幕状态并点亮屏幕

唤醒屏幕操作 os.system("adb shell input keyevent KEYCODE_POWER") or os.system('adb shell input keyevent 26...') 解锁屏幕 # 屏幕从（500，700）滑动到（500,50），延迟200号，毫秒 os.system("adb -s shell input swipe 500 700 500 50 200" )...# 输入密码 os.system('adb shell input text 1111') 关闭和开启屏幕样例 import datetime,os # 手机电源开关 def power_switch...('%s手机,亮屏时段,****已亮屏,执行解锁****' % p_num) # 屏幕从（500，700）滑动到（500,50），延迟200号，毫秒 os.system...以上操作需要adb环境已经搭建好，使用以下命令查看连接设备 C:\Users\enmonster>adb devices List of devices attached 97dc2d9 device 想获取某个

1.9K3 0

手机屏幕接口介绍，你的屏幕闪过吗？

屏幕是手机重要组成部分之一，有LCD和OLED两大类，LCD类型的屏幕需要单独的背光面板，非自发光，而OLED屏幕不需要背光面板，发光二极管可以自发光，因此LCD的对比度没有OLED高，一般来说OLED...现在市场上使用的折叠手机，由于需要折叠，表面不能有坚硬的玻璃盖板，因此在折叠位置容易出现折痕。...当屏幕发生异常时，中断引脚会发送中断信号给CPU，CPU获取屏幕状态可以初步判断异常是由于电源还是静电或是其他原因引起的。...IIC/SPI用于与屏幕上的触控进行通信，MIPI用于传输屏幕的显示数据，为了降低功耗，当屏幕显示内容不变，也就是静态画面时，MIPI往往不工作，静态画面已经存储到屏幕内部存储中，比如手机的AOD息屏显示功能...此外屏幕对静电特别敏感，常用抑制ESD措施有堵和疏两种，因此屏幕周围的缝隙、屏幕和相机的缝隙、屏幕和听筒的缝隙要用防静电胶处理，在屏幕接口上也要保留TVS器件，来抑制ESD对手机的影响。

4.8K2 0

根据获取内部元素的高度，设置iframe的高度

iframe 是一个非常迷得一个元素，很难直接获取其内部元素的高度。...下面分享一个方法，可以获取 iframe 内部元素的高度： function setIframeHeight(id){ try{ var iframe = document.getElementById

9.3K2 0

手机卫士手势滑动切换屏幕

定义手势识别器获取手势识别器GestureDetector对象，通过new GestureDetector(context,listener)，参数：上下文，监听器匿名内部类实现简单手势监听器SimpleOnGestureListener...轴的速度当第一个点减去第二个点大于200时，我们认为它是从右往左划，下一页当第二个点减去第一个点大于200时，我们认为它是从左往右划，上一页调用MotionEvent 对象的getRawX()可以获取到...X轴的坐标使用手势识别器识别手势重写activity的onTouchEvent()方法，获取到手势在界面上的滑动事件传递进来一个参数MotionEvent对象调用GestureDetector对象的...onTouchEvent(event)方法，参数：MotionEvent对象，把获取到的事件传递进去屏蔽斜着划两个点的y轴坐标之间的距离大于100时，我们认为它是斜着划的调用MotionEvent...对象的getRawY()可以获取到Y轴的坐标，两个点的差值取绝对值Math.abs()，判断大于100 就返回true，不往下进行如果找不到SimpleOnGestureListener类，使用new

1.7K2 0

ReactNative 获取屏幕宽高

需要导入Dimensions let Dimensions = require('Dimensions'); // 示例 class KKScreen { ...

2.1K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭