欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

判断横屏竖屏(三种)

程序员文章站 2023-11-05 20:25:28
在做移动端页面的时候经常会遇到需要判断横屏还是竖屏。下面将目前已知的通过html,css,js三种判断方法记录下来,方便以后翻阅。 1、通过在html中分别引用横屏和竖屏...

在做移动端页面的时候经常会遇到需要判断横屏还是竖屏。下面将目前已知的通过html,css,js三种判断方法记录下来,方便以后翻阅。

1、通过在html中分别引用横屏和竖屏的样式:

  <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow" > //引用竖屏的css
  <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" rel="external nofollow" > //引用横屏的css

2、css中通过媒体查询的方法来判断:

@media (orientation: portrait ){
 //竖屏css 
}
@media ( orientation: landscape ){
 //横屏css 
}

3、js判断是否为横屏竖屏:

window.addeventlistener("onorientationchange" in window ? orientationchange" : "resize", function() {
  if (window.orientation === 180 || window.orientation === 0) { 
   alert('竖屏状态!');
  } 
  if (window.orientation === 90 || window.orientation === -90 ){ 
   alert('横屏状态!');
  } 
 }, false);

只要用户改变了设备的查看模式,就会触发onorientationchange事件。

orientation有4个值:0,90,-90,180

值为0和180的时候为竖屏(180为倒过来的竖屏);

90和-90时为横屏(-90为倒过来的竖屏模式);

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!