使用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 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
js给table赋值的实例代码
Oct 13 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
vue cli 3.0 使用全过程解析
Jun 14 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
PHP内核探索:变量概述
2014/01/30 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
原生js+css实现tab切换功能
2020/09/17 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
Python基于动态规划算法计算单词距离
2015/07/25 Python
Python松散正则表达式用法分析
2016/04/29 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
深入浅析python with语句简介
2018/04/11 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
Python中的heapq模块源码详析
2019/01/08 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
苹果香港官方商城:Apple香港
2016/09/14 全球购物
设计师个人求职信范文
2014/02/02 职场文书
个人自我评价范文
2014/02/05 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
机电一体化专业求职信
2014/07/22 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
SQL Server中锁的用法
2022/05/20 SQL Server