移动端H5页面横屏竖屏判断

Myth丶恋晨 2022-09-04 08:57 183阅读 0赞

标签设置竖屏：

<meta name="x5-orientation" content="portrait">

css设置样式：

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

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

js监听：

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

移动端与PC端判断：

function browserRedirect() {
    	    var sUserAgent = navigator.userAgent.toLowerCase();
    	    if(/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce|windows mobile/.test(sUserAgent)) {
    	        //跳转手机端wap
    	        window.location.href="http://www.xxx.com/wap";
    	    }else{
                //跳转pc
    	        window.location.href="http://www.xxx.com";
            }
    	}
    browserRedirect();

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android判断横屏竖屏代码

// 判断Android当前的屏幕是横屏还是竖屏。横竖屏判断 if (this.getResources().getConfiguration().orie

系统管理员/ 2023年10月16日 22:14/ 0 赞/ 41 阅读

相关移动端H5强制页面横屏展示

接到一个H5小游戏的需求，需要强制H5横屏显示；大概效果如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

小咪咪/ 2022年12月27日 02:15/ 0 赞/ 668 阅读

相关 HTML5实战与剖析之判断移动端横屏竖屏功能

　　在手机端经常游走的我们很多时候都会对横屏和竖屏的概念比较熟悉，大家都经常头疼怎么才能判断这横屏和竖屏的状态呢，今儿梦龙就为大家分享分享。　　用CSS判断横屏竖

た入场券/ 2022年09月19日 08:20/ 0 赞/ 211 阅读

相关移动端H5页面横屏竖屏判断

标签设置竖屏： <meta name="x5-orientation" content="portrait"> css设置样式： @media scree

Myth丶恋晨/ 2022年09月04日 08:57/ 0 赞/ 184 阅读

相关 android 屏幕旋转（横屏、竖屏、反向横屏、反向竖屏）的实现

android 屏幕旋转（横屏、竖屏、反向横屏、反向竖屏）的实现前言：根据屏幕的旋转自动实现应用界面旋转，横屏、竖屏、反向横屏、反向竖屏。布局文件 <?x

迈不过友情╰/ 2022年06月06日 05:13/ 0 赞/ 887 阅读

相关 h5锁屏提醒-锁横屏和锁竖屏

移动端开发，我们一般是只做一套适配，但是拿手机来说，它又分横屏和竖屏；这两种屏幕要求的适配是完全不一样的。当我们只做了其他一种，不想做另外一种的话，屏幕使用提示就很重要了。

￡神魔★判官ぃ/ 2022年05月31日 07:51/ 0 赞/ 428 阅读

相关移动端浏览器横屏、竖屏样式

在做移动端的时候，我们会遇到横竖屏样式该如何使用，我们可以定义两个最顶层的父类class，然后根据css的后代选择器来定义相应的样式，但我们今天要说的是利用媒体查询来做。关

- 日理万妓/ 2022年05月26日 01:09/ 0 赞/ 292 阅读

相关移动端如何强制页面横屏

1. 背景最近公司要开发一个移动端的类网页游戏: 长按按钮有个自行车一直骑行，碰到某个国家的地标就弹出该国的相应say hello的tip，要求横屏显示，不能竖屏。

超、凢脫俗/ 2021年12月23日 01:37/ 0 赞/ 444 阅读

相关 Bootstrap横屏后竖屏

在写页面的首页时候，竖屏显示正常，切换横屏，再切换竖屏。如图 1.竖屏 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_

悠悠/ 2021年05月22日 20:36/ 0 赞/ 569 阅读

相关 HTML5判断移动端横屏竖屏功能

用CSS判断横屏竖屏问题： @media (orientation: portrait) { } 横屏 @media (orientation: landscap...

朱雀/ 2020年09月12日 00:44/ 0 赞/ 733 阅读