使用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 操作表格实现代码(多种操作打包)
Mar 20 Javascript
jquery实现点击消失的代码
Mar 03 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
ant-design-vue按需加载的坑的解决
May 14 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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
PHP4在WinXP下IIS和Apache2服务器上的安装实例
2006/10/09 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
PHP反射API示例分享
2016/10/08 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
jQuery+JSON实现AJAX二级联动实例分析
2015/12/18 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
老生常谈javascript中逻辑运算符&&和||的返回值问题
2017/04/13 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
vue+iview实现文件上传
2020/11/17 Vue.js
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
python实现控制台打印的方法
2019/01/12 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
店长岗位的工作内容
2013/11/12 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
5s推行计划书
2014/05/06 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python