使用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 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
May 23 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
js实现放大镜特效
May 18 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
一文搞懂ES6中的Map和Set
May 20 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
编译问题
2006/10/09 PHP
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
PHP异常处理浅析
2015/05/12 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
在Python的Django框架中包装视图函数
2015/07/20 Python
python模拟斗地主发牌
2020/04/22 Python
python exit出错原因整理
2020/08/31 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
如何写你的创业计划书
2014/01/07 职场文书
买卖车协议书
2014/04/21 职场文书
环保标语口号
2014/06/13 职场文书
化工工艺设计求职信
2014/06/25 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
独生子女证明范本
2015/06/19 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
护理工作心得体会
2016/01/22 职场文书