JavaScript 和 CSS 检测横屏适配

很多视口我们要对横屏和竖屏显示不同的布局,所以我们需要检测在不同的场景下给定不同的样式:


1 JavaScript检测横屏

window.orientation:获取屏幕旋转方向

window.addEventListener("resize", ()=>{
  if (window.orientation === 180 || window.orientation === 0) { 
   // 正常方向或屏幕旋转180度
    console.log('竖屏');
  };
  if (window.orientation === 90 || window.orientation === -90 ){ 
    // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
    console.log('横屏');
  }  
}); 


2 CSS检测横屏


@media screen and (orientation: portrait) {
 /*竖屏...*/
} 
@media screen and (orientation: landscape) {
 /*横屏...*/
}


3 现在大部分的手机是支持:orientationchange事件,如果不支持用:resize

//判断手机横竖屏状态
window.addEventListener(
 "onorientationchange" in window ? "orientationchange" : "resize",
 function () {
  if (window.orientation === 180 || window.orientation === 0) {
   // window.location.reload();
  }
  if (window.orientation === 90 || window.orientation === -90) {
   // window.location.reload();
  }
 },
 false
);
声明:本站所有文章,如无特殊说明或,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。本站所有图片如无特殊说明均为AI生成。
真诚赞赏,手留余香
赞赏
JavaScript,算法
JavaScript 中 0.1 加 0.2 不等于 0.3 的原因和解决方法
2023-07-17
Node.js
CRSF 跨站脚本攻击已死,使用 Same-Site Cookies 来防范 CSRF
2023-07-26
Jone
在什么样的花园里面,挖呀挖呀挖
种什么样的种子,开什么样的花
随机推荐
JavaScript 代码混淆加密工具 javascript-obfuscator
Vue3 挂载全局方法
MySQL 表名预处理
用 JavaScript 实现数字增加滚动动画
MySQL 使用 DATE_FORMAT() 和 FROM_UNIXTIME() 格式化时间
Nginx 通过日志统计访问数据
Node.js 使用 Jest 和 supertest 做接口测试
JavaScript 中 0.1 加 0.2 不等于 0.3 的原因和解决方法
Rollup 教程
如何使用命令修改 MySQL 数据库名称

微信联系我

夜间模式切换
回到顶部