当前位置: 首页 > 编程笔记 >

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

怀宇
2023-03-14
本文向大家介绍使用JavaScript判断手机浏览器是横屏还是竖屏问题,包括了使用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判断手机浏览器是横屏还是竖屏问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍Android编程判断横屏、竖屏及设置横竖屏的方法,包括了Android编程判断横屏、竖屏及设置横竖屏的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Android编程判断横屏、竖屏及设置横竖屏的方法。分享给大家供大家参考,具体如下: 还是这个手机项目,有一个需求是整个工程中只有刚进去的界面允许横屏显示,并且要将该界面的标题隐藏,当切换回竖屏显示的时候,标题变为可见,一

  • 本文向大家介绍Android判断屏幕是横屏或是竖屏的简单实现方法,包括了Android判断屏幕是横屏或是竖屏的简单实现方法的使用技巧和注意事项,需要的朋友参考一下 本文所述为一个Android的常用技巧代码,主要用于判断手机屏幕是横向或是竖向的,在判断屏幕水平或垂直后你可以对程序做出相应的响应,该实例代码只是判断是否为竖屏,若判断正确返回true,否则返回false。 具体的程序代码如下:

  • 本文向大家介绍解决Android手机屏幕横竖屏切换,包括了解决Android手机屏幕横竖屏切换的使用技巧和注意事项,需要的朋友参考一下 Android中当屏幕横竖屏切换时,Activity的生命周期是重新加载(说明当前的Activity给销毁了,但又重新执行加载), 怎么使屏幕横竖屏切换时,当前的Activity不销毁呢? 1. 在AndroidManifest.xml中为Activity设置co

  • 当前项目 横屏尺寸(1920 1080),竖屏尺寸(1080 1920 及其他小屏幕尺寸)。考虑到竖屏要适配不同尺寸的屏幕,第一次有使用flexible.js 。竖屏都能进行比较正常的适配,但是横屏的布局会显得比较夸张。目前是有考虑到写两套路由的方案,但是代码量可能会比较大,请问有什么其他好的办法嘛。

  • 本文向大家介绍javascript 判断是否是微信浏览器的方法,包括了javascript 判断是否是微信浏览器的方法的使用技巧和注意事项,需要的朋友参考一下 用js判断当前环境是否是是微信内置浏览器有两个方法: 1.判断useragent 2.判断是否支持微信内置浏览器才支持的一些方法,比如WeixinJSBridge 本次先介绍第一中方法,第二种方法等哪天再更新! 判断代码如下: 就是如此简单

  • 函数功能:判断屏幕是否亮屏 函数方法 bool = device.isWake() 返回值 类型 说明 bool string true - 屏幕亮屏,false - 屏幕黑屏 函数用例 bool = device.isWake() if bool then toast("屏幕亮屏",2) mSleep(3000) else toast("屏幕黑屏",2) mSle