使用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 相关文章推荐
HTTP状态代码以及定义(解释)
Feb 02 Javascript
jQuery滚动加载图片效果的实现
Mar 06 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
js实现新年倒计时效果
Dec 10 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 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
JAVA/JSP学习系列之六
2006/10/09 PHP
PHP SQLite类
2009/05/07 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
Python创建字典的八种方式
2019/02/27 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
详解python算法常用技巧与内置库
2020/10/17 Python
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
《木笛》教学反思
2014/03/01 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
2015年药店工作总结
2015/04/20 职场文书
雷锋电影观后感
2015/06/10 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis