css获取手机屏幕高度

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。通过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规则没有冲突，可以使用开发者工具调试样式。

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

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

有帮助

没帮助

如何使用css修复响应式设计问题

、

我已经提到了CSS中不同屏幕尺寸的不同设置。我已经提到了3种屏幕尺寸，即最大宽度320，最大宽度375和最大宽度780。然而，具有屏幕宽度320的电话正在从css获取屏幕宽度375px的属性。max-width: 780px)div.auto-style16 {padding-top: 30px;}根据上面的代码，一部最大宽度为320px的手机的高度应该

浏览 0提问于2019-04-17得票数 1

2回答

针对S5和Moto E的Cordova应用程序

、

我想加载css取决于屏幕尺寸为S5和较小的一个为Moto E。适用于S5 homeScreenStyleiPhone的homeScreenStyle和配置，以及适用于Moto E的iphoneConfigure银河S5 1920 1080 3 640 360 <meta name="viewport" content=

浏览 1提问于2015-05-14得票数 0

1回答

React-Native:屏幕被切成两半

、

我遇到了以下关于react-native的bug：只要我旋转智能手机，然后将其恢复正常，屏幕就会被切成两半，滚动视图的下半部分现在完全是白色的。

浏览 28提问于2020-06-24得票数 2

回答已采纳

1回答

网站在大屏幕上乱七八糟，在小屏幕上显示滚动条

、

我想让我的网站在所有的电脑屏幕上看起来几乎一样。当我在较大的屏幕上测试它时，页脚和页面内容的其余部分之间出现了差距。当我在较小的屏幕上测试它时，它显示得很好，但你必须垂直和水平滚动。<link rel="stylesheet" type="text/css" href=&

浏览 2提问于2013-12-11得票数 0

2回答

如何使用CSS/HTML在不同屏幕分辨率和大小的设备上显示高度为2 2mm的文本？

、

例如，在Chrome -设置-“字体和编码”中，它是这样配置的:标准字体: 16</body>然后在手机上显示OK (2 2mm文字高度)。

浏览 2提问于2016-12-06得票数 0

1回答

如何返回正确的heightForRowAtIndexPath

、、、、

但是我觉得使用iPhone 6+时，细胞的高度应该至少高20 in。有任何方法可以检测到its的iPhone 6 Plus/ 6和heightForRowAtIndexPath方法覆盖返回的高度吗？

浏览 0提问于2014-10-06得票数 0

回答已采纳

1回答

像素比:高分辨率设备上的“假”像素值是应用于所有宽度属性，还是仅应用于选定的属性？

、、、、

我正在为一家网店做一些CSS，它完全生活在安卓和iOS移动应用程序的网页视图中。我用媒体查询来区分手机和平板电脑。内容显示在一个应用程序中，该应用程序在所有手机上被迫进入肖像模式。因此，如果用户的手机倾斜，比如说700 x 900像素，他们的设备宽度仍然是700 if。这一切都很好。那就意味着我会在那些手机上得到平板电脑的布局。幸运的是，操作系统和设备制造商已经领先于这个问题，像素值现在比实际的像素数要小得多。现在我想知道:这个设置(“假”像素大小)是否适用于所有基于像素的CSS值？它

浏览 1提问于2014-07-17得票数 0

2回答

小程序 camera 怎么设置高度100%？

、、

浏览 341提问于2021-08-04

回答已采纳

1回答

android / phonegap应用程序多屏幕支持

、、

我们正在使用html5、CSS3、JQM和phonegap为安卓平台开发一个移动应用程序。由于android手机有不同的屏幕大小，我们无法找到适合多个屏幕的背景图像或任何图像的方法。这些背景图像很适合宏达电、三星S3迷你手机等，但在三星Note等更大的手机中却无法伸展。CSS使用：welcomePage{ background:url('file:///android

浏览 1提问于2013-03-13得票数 0

1回答

如何在SingleChildScroll中使用容器来获取最大可用高度？

、

), ), ); 我希望‘应用程序’部分与白色背景，以完全覆盖屏幕的底部区域我需要为较小尺寸的手机保留SingleChildScroll。非常感谢！

浏览 39提问于2020-11-18得票数 1

1回答

这些编写媒体查询的方式有什么不同

我看到一些人直接为桌面编写网站代码，但另一些人在讨厌所有风格后-开始直接在媒体查询中编码……适用于台式机、平板电脑和手机。有没有什么最佳实践，或者它是一个偏好？

浏览 0提问于2013-11-07得票数 1

2回答

如何裁剪图像以适应屏幕中所需的高度？

、、

我有一张大图片，它的高度比屏幕高。我对宽度没有问题。我需要对它进行裁剪，以便屏幕上65%的顶部包含此图像。<body><p>Description</p>如果我写一个CSS如下，整个图像会被压缩，以适应此外，如果我调整屏幕的大小，图像自动开始尝试适应前65%，使

浏览 4提问于2014-05-15得票数 0

1回答

背景图片在移动设备上不能正常显示

、、

使用下面的代码，我似乎无法获得适合移动设备全屏显示的图像。然而，在我自己的电脑上，它看起来完全没问题。 width: 100%; margin: 0; height:1048px; background-size:cover; padding-top: 40p

浏览 0提问于2016-02-05得票数 0

1回答

使用jqtouch自定义大小的面板上滑块

、、

但我希望视图只滑动到手机屏幕高度的一半(即我们在safari -iphone中点击书签按钮时出现的高度)。我尝试在css文件中进行更改。但它不会生效。

浏览 2提问于2011-02-14得票数 2

1回答

如何使底部选项卡导航器的图标适合选项卡栏？

、

如果不是，有没有一些常量可以让我得到标签栏的高度？这就是我所得到的： ?

浏览 11提问于2020-01-17得票数 0

1回答

CSS，图像高度:自动，在调整屏幕大小时覆盖其下方的div (手机水平持有)

、、、、

我正在设计我的网站的手机部分。我有一个，顶部:0%，位置:固定，横幅图像与，宽度:100%，高度:自动。当手机水平转动时，横幅图像可以很好地覆盖整个屏幕宽度。编辑:我也对javascript

浏览 1提问于2013-06-16得票数 2

回答已采纳

1回答

使用translationY将视图移动到屏幕底部

、

我在我的应用程序中有一个可以通过translationY移动的视图，我试图添加一个选项，通过获取设备的屏幕尺寸将其移动到屏幕底部，但这种行为在不同设备上确实不一致，它在各种像素手机上都能很好地工作，但在OnePlus手机和一些高分辨率三星手机上完全消失，但在低分辨率手机上太高。我所要做的就是得到屏幕高度，减去视图的高度和导航栏的高度，并将其设置为其位置： var barHeight = 0 var

浏览 30提问于2020-07-05得票数 0

回答已采纳

1回答

图像div与前面div垂直重叠

、

在许多屏幕上，数字div甚至看不到，因为bingo div占据了整个屏幕<body> </div> </div> &

浏览 2提问于2017-10-29得票数 1

2回答

在屏幕顶部粘贴一个标题

、、

我想使用粘性标题，在正常的屏幕上(PC/笔记本电脑等)，它可以正常工作。但在手机上，当我放大的时候，它不能工作。我认为是这样的，因为手机只显示了网站的一部分，而页面的高度仍然与未放大时相同。我只有一个CSS： .sticky { top: 0;} 有没有办法让我的页眉贴在屏幕顶部，而不是页面顶部？

浏览 18提问于2020-08-24得票数 0

回答已采纳

1回答

如何调整html邮件程序中的图像大小以支持智能手机和pc？

、

我有一个 header 的图像头，宽度为600 of，高度为75 of。在智能手机上读取邮件时，是否有办法缩小图像的大小？我是否可以使用线上的css max-width:600px; width:100%;，使最大宽度保持在600 to，然后在屏幕尺寸较小的智能手机上查看时，它会缩小到手机显示大小？

浏览 1提问于2012-07-18得票数 0

点击加载更多