使用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 相关文章推荐
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 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
php 执行系统命令的方法
2009/07/07 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
iview Upload组件多个文件上传的示例代码
2018/09/30 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
django接入新浪微博OAuth的方法
2015/06/29 Python
Python切片知识解析
2016/03/06 Python
Python中正则表达式详解
2017/05/17 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
Pytorch之finetune使用详解
2020/01/18 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
关键字final的用法
2013/10/02 面试题
联强国际笔试题面试题
2013/07/10 面试题
个人评语大全
2014/05/04 职场文书
受资助学生感谢信
2015/01/21 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
护士2015年终工作总结
2015/04/29 职场文书
读书笔记怎么写
2015/07/01 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技