JS和css实现检测移动设备方向的变化并判断横竖屏幕
方法一：用触发手机的横屏和竖屏之间的切换的事件
window.addEventListener("orientationchange", function() {
// 宣布新方向的数值
alert(window.orientation);
}, false);
方法二：监听调整大小的改变
window.addEventListener("resize", function() {
// 得到屏幕尺寸 (内部/外部宽度，内部/外部高度)
}, false);
css判断横竖屏幕
/* portrait */
@media screen and (orientation:portrait) {
/* portrait-specific styles */
}
/* landscape */
@media screen and (orientation:landscape) {
/* landscape-specific styles */
}
本地window.matchMedia方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角：
var mql = window.matchMedia("(orientation: portrait)");
// 如果有匹配，则我们处于垂直视角
if(mql.matches) {
// 直立方向
alert("1")
} else {
//水平方向
alert("2")
}
// 添加一个媒体查询改变监听者
mql.addListener(function(m) {
if(m.matches) {
// 改变到直立方向
document.getElementById("test").innerHTML="改变到直立方向";
}
else {
document.getElementById("test").innerHTML="改变到水平方向";
// 改变到水平方向
}
});
相关文章
react-router-dom v6 通过outlet实现keepAlive 功能的实现
本文主要介绍了react-router-dom v6 通过outlet实现keepAlive功能，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
前端使用Compressor.js实现图片压缩上传的详细过程
Compressor.js一个JavaScript图像压缩器,使用浏览器的原生canvas.toBlob API来执行压缩工作,这篇文章主要给大家介绍了关于前端使用Compressor.js实现图片压缩上传的详细过程,需要的朋友可以参考下2024-07-07
本文给大家简单探讨下Js数组排序函数sort()的用法和示例，有需要的小伙伴可以参考下。2015-06-06
这篇文章主要为大家详细介绍了JS实现页面数据懒加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
本文章来给各位同学介绍一款不错的Js点击弹出下拉菜单效果代码，这种效果有点像支付宝的下拉菜单，有需要了解的朋友可参考。2013-08-08
JS简单获取当前日期时间的方法(如：2017-03-29 11:41:10 星期四)
这篇文章主要介绍了JS简单获取当前日期时间的方法,涉及javascript针对当前日期时间的简单运算操作,需要的朋友可以参考下2017-03-03
在前端,处理文件下载通常涉及到接收一个文件流,本文为大家整理了前端文件下载并接受文件流的一些常见方法,有需要的小伙伴可以参考一下2024-12-12
这篇文章主要介绍了webpack打包js文件的方法及webpack打包后的JS文件如何部署,需要的朋友可以参考下2017-12-12
异步模式在 Web 编程中变得越来越重要，如何处理异步请求后的操作是一件麻烦事。Promise 是一种异步编程模型，术语称作 Deferred 模式，它通过一组API来规范化异步操作，让异步操作的流程控制更加容易。2014-05-05
纯JavaScript基于notie.js插件实现消息提示特效
这篇文章主要介绍了纯JavaScript基于notie.js插件实现消息提示特效，可以制作Alert提示框，确认框和带输入的消息框，感兴趣的小伙伴们可以参考一下2016-01-01
最新评论