js和css如何监测屏幕横排还是竖屏显示？
网友回复
在 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 和 ...
点击查看剩余70%
by 钱端世界
我知道答案，我要回答
私活外包
