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


Posted in Javascript onAugust 02, 2016
//判断手机横竖屏状态:
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判断手机浏览器是横屏还是竖屏问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
Oct 24 Javascript
js 数组克隆方法 小结
Mar 20 Javascript
JS与C#编码解码
Dec 03 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
AngularJS ng-mousedown 指令
Aug 02 #Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 #Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 #Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 #Javascript
jQuery树形控件zTree使用小结
Aug 02 #Javascript
jquery 判断selection range 是否在容器中的简单实例
Aug 02 #Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 #Javascript
You might like
Yii框架上传图片用法总结
2016/03/28 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
Python实现字符串格式化的方法小结
2017/02/20 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
Python之时间和日期使用小结
2019/02/14 Python
如何使用Python 打印各种三角形
2019/06/28 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
jupyter notebook 多行输出实例
2020/04/09 Python
如何使用PHP session
2015/04/21 面试题
秋季运动会广播稿大全
2014/02/17 职场文书
法律进企业活动方案
2014/03/04 职场文书
国培计划培训感言
2014/03/11 职场文书
关爱残疾人标语
2014/06/25 职场文书
小学教学工作总结2015
2015/05/13 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS