使用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 相关文章推荐
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 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
php采集时被封ip的解决方法
2010/08/29 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
JavaScript 对象、函数和继承
2009/07/07 Javascript
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
浅谈django中的认证与登录
2016/10/31 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
python机器学习库常用汇总
2017/11/15 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
在spyder IPython console中,运行代码加入参数的实例
2020/04/20 Python
人力管理专业毕业生求职信
2014/02/27 职场文书
工商管理专业大学生职业生涯规划范文
2014/03/09 职场文书
我的小天地教学反思
2014/04/30 职场文书
党员剖析材料范文
2014/12/18 职场文书
外出听课学习心得体会
2016/01/15 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL