在 JavaScript 和 CSS 中，有几种方法可以检测屏幕是横屏还是竖屏显示。我将为您介绍两种主要方法：
1. 使用 JavaScript:function checkOrientation() {
if (window.matchMedia("(orientation: portrait)").matches) {
console.log("当前是竖屏");
// 在这里添加竖屏时的逻辑
} else {
console.log("当前是横屏");
// 在这里添加横屏时的逻辑
}
}
// 初始检查
checkOrientation();
// 监听屏幕方向变化
window.addEventListener("resize", checkOrientation);这段代码使用 `window.matchMedia()` 方法来检查屏幕方向。它还添加了一个事件监听器来响应屏幕方向的变化。
2. 使用 CSS 媒体查询:/* 竖屏样式 */
@media screen and (orientation: portrait) {
body {
background-color: lightblue;
}
}
/* 横屏样式 */
@media screen and (orientation: landscape) {
body {
background-color: lightgreen;
}
}这种方法使用 CSS 媒体查询来应用不同的样式，取决于屏幕的方向。
3. 结合 JavaScript 和 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 {
transition: background-color 0.3s ease;
}
@media screen and (orientation: portrait) {
body {
background-color: lightblue;
}
}
@media screen and (orientation: landscape) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1 id="orientation-text">屏幕方向: </h1>
<script>
function checkOrientation() {
const isPortrait = window.matchMedia("(orientation: portrait)").matches;
const orientationText = document.getElementById("orientation-text");
if (isPortrait) {
orientationText.textContent = "屏幕方向: 竖屏";
} else {
orientationText.textContent = "屏幕方向: 横屏";
}
}
// 初始检查
checkOrientation();
// 监听屏幕方向变化
window.addEventListener("resize", checkOrientation);
</script>
</body>
</html>这个例子结合了 CSS 媒体查询和 JavaScript。CSS 负责改变背景颜色，而 JavaScript 则更新页面上的文本内容。注意事项：
- 在某些设备上，`resize` 事件可能不会在屏幕旋转时触发。在这种情况下，您可以考虑使用 `orientationchange` 事件。
- 某些浏览器可能需要额外的前缀来支持这些特性，特别是在older版本中。网友回复
我知道答案，我要回答
私活外包
最新提问
如何用html写出网页滚动视频播放卡片视觉差异效果的代码？
程序员如何低成本搭建代理进行科学上网学习技术？
threejs如何做个三维搭积木的游戏？
three如何实现标记多个起始路过地点位置后选择旅行工具（飞机汽车高铁等），最后三维模拟行驶动画导出mp4？
ai实时驱动的3d数字人可视频聊天的开源技术有吗
swoole+phpfpm如何实现不同域名指向不同目录的多租户模式？
如何用go替换nginx实现请求phpfpm解析运行php脚本？
有没有浏览器离线运行进行各种文档、图片、视频格式转换的开源工具？
如何使用go语言搭建一个web防火墙？
linux如何检测特定网络协议比如http协议中报文是否包含特点关键词并阻止返回给客户？
