文档章节

js判断手机浏览器是横屏or竖屏

zwjjap
 zwjjap
发布于 2016/10/13 16:13
字数 280
阅读 205
收藏 3

移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。
从而根据实际需求而执行相应的程序。通过添加监听事件onorientationchange,进行执行就可以了。

//判断手机横竖屏状态:
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);

 

在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 竖屏

本文转载自:http://caibaojian.com/orientation.html

上一篇: webpack 环境安装
zwjjap
粉丝 13
博文 198
码字总数 21945
作品 0
武汉
程序员
私信 提问
媒体查询iphone4,5,6以及更高

-------------------------------------------安卓适配 开始------------------------------------------ 关于安卓机的移动端设备适配问题? 安卓机设备众多,在网上也不太容易知道此设备的长...

柴高八斗之父
2017/07/17
54
0
关于报表在移动端展现需你需要知道哪些?

现在,企业或者电商平台的商家、业务方,每天都有大量的人需要在线查看大量的指标,用于监控、分析关键业务数据的发展趋势。而且,这些查看分析数据的诉求,对于随时随地、方便快捷的要求也越...

拾光石艺
2018/10/19
0
0
移动端H5解惑-页面适配(二)

本文原文发表于2016年我的github,但是直到现在为止还有很多童鞋问我相关概念,于是整理下再分享一下。 原文链接:github.com/sunmaobin/s… 一、基础概念 在了解如何做H5页面适配前,大家都...

sunmaobin
2018/08/05
0
0
[JS代码]如何判断ipad或者iphone是否为横屏或者竖屏 - portrait或者lan...

日期:2012-4-15 来源:GBin1.com 在ipad/iphone开发中我们往往需要判断用户目前的屏幕的位置,这样加以优化显示应用内容。今天这里我们分享一个jQuery的代码,能够有效帮助大家判断横屏或者...

gbin1
2012/04/16
214
0
怎样用js/jquery获取ipad浏览器的宽高?

怎样用js/jquery获取ipad浏览器的宽高?用innerwidth和innerheight,为什么我竖屏是980x1185,横屏是981x644?

Robin3D
2013/12/19
134
0

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
8
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
10
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0
PHP+Ajax微信手机端九宫格抽奖实例

PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现。支持可以设置中奖概率等。 奖品列表 <div class="lottery_list clearfix" id="lottery"> ......

ymkjs1990
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部