使用JavaScript判断手机浏览器是横屏还是竖屏问题

//判断手机横竖屏状态：
function hengshuping(){
if(window.orientation==180||window.orientation==0){
alert("竖屏状态！")
}
if(window.orientation==90||window.orientation==-90){
alert("横屏状态！")
}
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

从而根据实际需求而执行相应的程序。通过添加监听事件onorientationchange，进行执行就可以了。

在ipad、iphone网页开发中，我们很可能需要判断是横屏或者竖屏。

下面介绍如何用 jQuery 判断iPad、iPhone、Android是横屏还是竖屏的方法

function orient() {
if (window.orientation == 90 || window.orientation == -90) {
//ipad、iphone竖屏；Andriod横屏
$("body").attr("class", "landscape");
orientation = 'landscape';
return false;
}
else if (window.orientation == 0 || window.orientation == 180) {
//ipad、iphone横屏；Andriod竖屏
$("body").attr("class", "portrait");
orientation = 'portrait';
return false;
}
}
//页面加载时调用
$(function(){
orient();
});
//用户变化屏幕方向时调用
$(window).bind( 'orientationchange', function(e){
orient();
});

屏幕方向对应的window.orientation值：

ipad： 90 或 -90 横屏

ipad： 0 或180 竖屏

Andriod：0 或180 横屏

Andriod： 90 或 -90 竖屏

以上所述是小编给大家介绍的使用JavaScript判断手机浏览器是横屏还是竖屏问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JS判断浏览器是否安装flash插件的简单方法

    JS判断浏览器是否安装flash插件的简单方法

    1. 直接判断是否有flash插件 var myFlash = (function(){ if(typeof window.ActiveXObject != "undefined"){ return new ActiveXObject("ShockwaveFlash.ShockwaveFlash"); }else{ return navigator.plugins['Shockwave Flash']; } })(); chrome: Edge浏览器中取消了wind

  • JS判断Android、iOS或浏览器的多种方法(四种方法)

    第一种:通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端. 代码如下: <script type="text/javascript"> var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)?

  • JavaScript判断是否是微信浏览器

    JavaScript判断是否是微信浏览器

    先给大家说下实现原理 根据判断UA中是否有关键字micromessenger,有的话则是微信内置浏览器 实现代码如下所示: //判断是否微信登陆 function isWeiXin() { var ua = window.navigator.userAgent.toLowerCase(); console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, lik

  • JS如何判断浏览器类型和详细区分IE各版本浏览器

    今天用到JS判断浏览器类型,于是就系统整理了一下,便于后期使用. /* * 描述:判断浏览器信息 * 编写:LittleQiang_w * 日期:2016.1.5 * 版本:V1.1 */ //判断当前浏览类型 function BrowserType() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; //判断是否

  • 使用JavaScript判断手机浏览器是横屏还是竖屏问题

    //判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态!") } if(window.orientation==90||window.orientation==-90){ alert("横屏状态!") } } window.addEventListener("onorientationchange" i

  • 移动端使用CSS或JS判断横屏和竖屏的讲解

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

  • 两款JS脚本判断手机浏览器类型跳转WAP手机网站

    随着移动设备的普及,企业的网络宣传已经不能局限在PC端,而需要同时在移动端有所建树.对于公司网站来说,以前都是做的PC端的,当然手机等移动端也可以访问,但是用户体验肯定不如完全适合的手机端来的方便.我们在给自己的网站做了WAP手机网站之后,如果有用户通过手机访问我们的企业顶级域名网站,那就判断跳转到专为的WAP网站. 这里老左整理到目前自己在使用的2种JS脚本,因为之前一直有朋友跟我要,所以这里分享出来. 第一种:直接JS脚本 <script type="text/javascript&q

  • javascript 判断当前浏览器版本并判断ie版本

    javascript 判断当前浏览器版本并判断ie版本: <span style="font-size:18px;">方便以后再次使用:</span> <span style="font-size:18px;">1.判断ie版本</span> <pre name="code" class="javascript"><span style="font-s

  • JavaScript判断微信浏览器实例代码

    先给大家说下我的项目需求:用户扫一扫二维码会产生一个链接,该链接会向后端发送个请求,返回一个 apk 的下载地址,用户点击下载按钮可以下载此 apk.然后就发生了问题,经过测试,发现用微信扫一扫打开的页面点击下载按钮下载不了 apk,后百度之,原来是微信内置浏览器屏蔽了下载链接,后面和需求方沟通,需求改为如果用户是用微信内置浏览器打开的,则提示用户换一个浏览器打开页面,否则下载不了 apk.那么该如何判断用户是否是用微信浏览器呢? 我们知道 js 可以通过 window.navigator.us

  • 用JavaScript判断CSS浏览器类型前缀的两种方法

    用JavaScript判断CSS浏览器类型前缀的两种方法

    不管我们对浏览器类型前缀有多么的讨厌,我们都不得不每天面对它,否者有些东西不能正常工作.这些前缀的用法有两种:在CSS里(例如"-moz-")和在JS里.有一个神奇的 X-Tag 项目里有一段很聪明的JavaScript脚本,可以用来判断当前使用的是什么前缀--让我来展示它是如何工作的! 比如 CSS 前缀,IE 的是 "-ms-",旧版 Opera 的是 "-o-",Firefox 的是 "-moz-",Safari/Chr

  • javascript 判断当前浏览器版本并判断ie版本

    javascript 判断当前浏览器版本并判断ie版本: 方便以后再次使用: 1.判断ie版本 //js判断Ie 版本 function IeVesion() { var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s

  • Android编程判断横屏、竖屏及设置横竖屏的方法

    本文实例讲述了Android编程判断横屏.竖屏及设置横竖屏的方法.分享给大家供大家参考,具体如下: 还是这个手机项目,有一个需求是整个工程中只有刚进去的界面允许横屏显示,并且要将该界面的标题隐藏,当切换回竖屏显示的时候,标题变为可见,一开始我百度了一下有一个监听activity是否横屏竖屏的监听函数,如下: // 橫屏不重新加載activity,調用該方法 @Override public void onConfigurationChanged(Configuration newConfig)

  • 微信小程序实现横屏和竖屏签名功能

    微信小程序实现横屏和竖屏签名功能

    本文实例为大家分享了微信小程序实现横屏和竖屏签名的具体代码,供大家参考,具体内容如下 wxml <view class="container">   <canvas canvas-id="firstCanvas" id="firstCanvas" bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></ca

  • ios启动页强制竖屏（进入App后允许横屏与竖屏）

    这篇文章主要介绍了在ios启动页强制竖屏,进入App后允许横屏与竖屏的相关资料,需要的朋友可以参考下. 方法如下 1.修改App-info.plist(在XCode中General中设置 一样的效果) <key>UISupportedInterfaceOrientations</key> <array> <string>UIInterfaceOrientationPortrait</string> </array> 2.AppDele

随机推荐