判断横屏竖屏方式（三种）

本文主要介绍了通过HTML，CSS，JS三种判断横屏竖屏的方法。具有很好的参考价值，下面跟着小编一起来看下吧

在做移动端页面的时候经常会遇到需要判断横屏还是竖屏。下面将目前已知的通过HTML，CSS，JS三种判断方法记录下来，方便以后翻阅。

1、通过在html中分别引用横屏和竖屏的样式：

　　<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow" > //引用竖屏的CSS<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" rel="external nofollow" > //引用横屏的CSS

2、CSS中通过媒体查询的方法来判断：

@media (orientation: portrait ){//竖屏CSS
}
@media ( orientation: landscape ){//横屏CSS
}

3、js判断是否为横屏竖屏:

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {if (window.orientation === 180 || window.orientation === 0) { alert('竖屏状态！');} if (window.orientation === 90 || window.orientation === -90 ){ alert('横屏状态！');} }, false);

只要用户改变了设备的查看模式，就会触发onorientationchange事件。

orientation有4个值：0,90，-90,180

值为0和180的时候为竖屏（180为倒过来的竖屏）；

90和-90时为横屏（-90为倒过来的竖屏模式）；

在ipad、iphone网页开发中，我们很可能需要判断是横屏或者竖屏。Android和IOS刚好相反

下面介绍如何用 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://www.jb51.net/article/105453.htm http://www.jb51.net/article/89664.htm

判断横屏竖屏方式（三种）相关推荐

php判断显示器横屏还是竖屏,判断横屏竖屏（三种）
在做移动端页面的时候经常会遇到需要判断横屏还是竖屏.下面将目前已知的通过HTML,CSS,JS三种判断方法记录下来,方便以后翻阅. 1.通过在html中分别引用横屏和竖屏的样式: //引用竖屏的CSS ...
cocos2dx怎样设置ios和Android横屏竖屏的几种方法
cocos2d-x编译到ios上.默认是横屏的,若要改为http://竖屏.不同的ios版本号.方法也会不同在ios7上或许我们设置好了横竖屏.但到了ios6上或许会变化.以下白白给大家分享一下我的 ...
android横屏竖屏设置
Android横竖屏切换总结(Android资料) Android横竖屏要解决的问题应该就两个: 一.布局问题二.重新载入问题 1.布局问题:如果不想让软件在横竖屏之间切换,最简单的办法就是在项目的 ...
rk3288android强制横屏,RK3288 6.0 双屏异显，横屏+竖屏【转】
RK3288 6.0 双屏异显,横屏+竖屏由于是横屏+竖屏的组合,目前考虑两种实现方案.1.副屏存在黑边 2.对副屏内容进行拉伸. 默认情况下,我们设置的双屏初始rotation都为Surface. ...
手机屏幕的横屏竖屏的切换与判断
在一般情况下,横屏竖屏的切换,会将activity杀死再生成新的,那么会影响用户的体验度.有两种方法,可以解决. (1).直接固定横屏或者竖屏,屏幕不会切换. 在配置清单中: <activity ...
【转】Android自适应不同分辨率或不同屏幕大小的layout布局(横屏|竖屏)
一:不同的layout Android手机屏幕大小不一,有480x320, 640x360, 800x480.怎样才能让App自动适应不同的屏幕呢? 其实很简单,只需要在res目录下创建不同的layo ...
android横屏分辨率,android适配不同分辨率hdpi、mdpi、ldpi横屏竖屏
一:不同的layout Android手机屏幕大小不一,有480x320, 640x360, 800x480.怎样才能让App自动适应不同的屏幕呢? 其实很简单,只需要在res目录下创建不同的layo ...
手绘白板动画视频制作工具VideoScribe 3.11.2 Windows最新横屏竖屏方屏视频号普屏电商六合一汉化中文专业版画布和输出视频无水印支持720p和1080p高清输出
众所周知VideoScribe(以下简称VS)有7天免费试用版,任何人都可以去下载最新的安装包体验试用,支持Windows 64位系统和macOS苹果系统.免费试用版有以下特点: 默认提供美国英语,西 ...
Android 模拟器横屏竖屏切换设置
Android 模拟器横屏竖屏切换设置时间:2012-07-04 来源:设计与开发作者:Daniel 点击:5571 摘要: Android 模拟器旋转,横屏.竖屏切换设置,andr ...

判断横屏竖屏方式（三种）

判断横屏竖屏方式（三种）相关推荐

最新文章

热门文章