使用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制作相册集
Apr 28 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
原生js实现放大镜效果
Jan 11 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 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缓存类代码(附详细说明)
2011/06/09 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
微信小程序实现换肤功能
2018/03/14 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
破解安装Pycharm的方法
2018/10/19 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
Django nginx配置实现过程详解
2020/09/10 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
python3判断IP地址的方法
2021/03/04 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
客服文员岗位职责
2013/11/29 职场文书
投标服务承诺书
2014/05/28 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
小学班主任心得体会
2016/01/07 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL