源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JS和css实现检测移动设备方向的变化并判断横竖屏幕

  • 时间:2022-02-19 08:19 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JS和css实现检测移动设备方向的变化并判断横竖屏幕
[b]方法一:用触发手机的横屏和竖屏之间的切换的事件[/b]
[u]复制代码[/u] 代码如下:
window.addEventListener("orientationchange", function() { // 宣布新方向的数值 alert(window.orientation); }, false);
[b]方法二:监听调整大小的改变[/b]
[u]复制代码[/u] 代码如下:
window.addEventListener("resize", function() { // 得到屏幕尺寸 (内部/外部宽度,内部/外部高度)  }, false);
  [b]css判断横竖屏幕[/b]
[u]复制代码[/u] 代码如下:
/* portrait */ @media screen and (orientation:portrait) { /* portrait-specific styles */ } /* landscape */ @media screen and (orientation:landscape) { /* landscape-specific styles */ }
[b]本地window.matchMedia方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角:[/b]
[u]复制代码[/u] 代码如下:
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="改变到水平方向"; // 改变到水平方向 } });
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部