使用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 相关文章推荐
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
javascript实现依次输入input自动定焦
Dec 23 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
js中!和!!的区别与用法
May 09 Javascript
JavaScript类的继承多种实现方法
May 30 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
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 CURL获取邮箱地址的详解
2013/06/03 PHP
php中的静态变量的基本用法
2014/03/20 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
js+css在交互上的应用
2010/07/18 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
13个PHP函数超实用
2015/10/21 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
Django自定义分页与bootstrap分页结合
2021/02/22 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
pandas ix &iloc &loc的区别
2019/01/10 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
Numpy 多维数据数组的实现
2020/06/18 Python
Python如何将字符串转换为日期
2020/07/31 Python
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
存储过程的优点有哪些
2012/09/27 面试题
必须要使用游标的SQL语句有那些
2012/05/07 面试题
水电工岗位职责
2014/02/12 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python
Python语言中的数据类型-序列
2022/02/24 Python
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏