2025年2月3日 星期一 甲辰(龙)年 腊月初三 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

js/css竖屏横屏判断方法

时间:01-19来源:作者:点击数:25

在手机端,当用户将手机转屏的时候,你制作的HTML的页面能被转屏后支持吗?估计很多开发者想兼容,却被卡在了转屏检测,也就是横屏竖屏判断这个环节,怎么知道用户此时的手机设备屏幕是横屏状态还是竖屏状态?

今天就来整理一下js和css判断竖屏还是横屏的方法

css:

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

js:

  • window.onload = function(){ //初次加载
  • isD();
  • }
  • window.addEventListener("resize", function(){ //屏幕宽度发生变化
  • isD();
  • });
  • function isD(){
  • if (window.orientation === 180 || window.orientation === 0) {
  • // 正常方向或屏幕旋转180度
  • console.log('竖屏');
  • };
  • if (window.orientation === 90 || window.orientation === -90 ){
  • // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
  • console.log('横屏');
  • }
  • }

相关知识点:

js根据ip段判断当前城市

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门