使用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 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
VUE重点问题总结
Mar 19 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
vue组件实现进度条效果
Jun 06 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
JavaScript 高效运行代码分析
2010/03/18 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
深入理解vue路由的使用
2017/03/24 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
python清除函数占用的内存方法
2018/06/25 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
详解Python装饰器
2019/03/25 Python
Canvas实现保存图片到本地的示例代码
2018/06/28 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
Ejb技术面试题
2015/04/29 面试题
Servlet如何得到服务器的信息
2015/12/22 面试题
煤矿安全承诺书
2014/05/22 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
技能培训通讯稿
2015/07/18 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
Redis实现一个账号只能登录一个设备
2022/04/19 Redis
php解析非标准json、非规范json的方式实例
2022/05/10 PHP
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python