使用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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
jQuery对象和DOM对象相互转化
Apr 24 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 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
《星际争霸II》全新指挥官斯台特曼现已上线
2020/03/08 星际争霸
基于PHP对XML的操作详解
2013/06/07 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
php压缩文件夹最新版
2018/07/18 PHP
extjs fckeditor集成代码
2009/05/10 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
你必须知道的Javascript知识点之"字面量和对应类型"说明介绍
2013/04/23 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
初学python数组的处理代码
2011/01/04 Python
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
Python如何调用JS文件中的函数
2019/08/16 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
python如何查看网页代码
2020/06/07 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
遗体告别仪式主持词
2014/03/20 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript