前端判断横屏还是竖屏

Posted 情绪控攻城狮

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端判断横屏还是竖屏相关的知识,希望对你有一定的参考价值。

在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。
首先在head中加入如下代码:

1
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

针对上述viewport标签有如下说明
1)、content中的width指的是虚拟窗口的宽度。

2)、user-scalable=no就一定可以保证页面不可以缩放吗?NO,有些浏览器不吃这一套,还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。

3)、initial-scale=1.0 初始缩放比例受user-scalable控制吗?不一定,有些浏览器会将user-scalable理解为用户手动缩放,如果user-scalable=no,initial-scale将无法生效。

4)、手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。

5)、如果页面是经过缩小适应屏幕宽度的,会出现一个问题,当文本框被激活(获取焦点)时,页面会放大至原来尺寸。

一:CSS判断横屏竖屏

写在同一个CSS中

1
2
3
4
5
6
@media screen and (orientation: portrait) {
  /*竖屏 css*/
}
@media screen and (orientation: landscape) {
  /*横屏 css*/
}

分开写在2个CSS中
竖屏

1
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

横屏

1
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

一:JS判断横屏竖屏

 

01
02
03
04
05
06
07
08
09
10
//判断手机横竖屏状态:
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);
//移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。

以上是关于前端判断横屏还是竖屏的主要内容,如果未能解决你的问题,请参考以下文章

Android 判断当前屏幕是横屏还是竖屏

text android横竖屏切换判断活动是横屏还是竖屏

怎么判断手机屏幕是横屏的,还是竖屏的

Swift 支持某个页面横竖屏切换与强制横屏

用JavaScript判断横屏竖屏问题

判断手机横屏和竖屏方向