使用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的$(document).ready()和onload的加载顺序
May 26 Javascript
javascript 全选与全取消功能的实现代码
Dec 23 Javascript
js 自定义个性下拉选择框示例
Aug 20 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
Vue 组件参数校验与非props特性的方法
Feb 12 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 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
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
2009/08/03 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
利用npm 安装删除模块的方法
2018/05/15 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
Python制作钉钉加密/解密工具
2016/12/07 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
Python多进程fork()函数详解
2019/02/22 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
软件测试笔试题
2012/10/25 面试题
运动会广播稿300字
2014/01/10 职场文书
迎新晚会邀请函
2014/02/01 职场文书
努力学习演讲稿
2014/05/10 职场文书
社团活动总结书
2014/06/27 职场文书
政府个人对照检查材料思想汇报
2014/10/08 职场文书
思想道德自我评价2015
2015/03/09 职场文书