移动端--判断横竖屏

(function(){
var supportOrientation = (typeof window.orientation === ‘number‘ &&
typeof window.onorientationchange === ‘object‘);
var init = function(){
var htmlNode = document.body.parentNode,
orientation;
var updateOrientation = function(){
if(supportOrientation){
orientation = window.orientation;
switch(orientation){
case 90:
case -90:
orientation = ‘landscape‘;
break;
default:
orientation = ‘portrait‘;
break;
}
}else{
orientation = (window.innerWidth > window.innerHeight) ? ‘landscape‘ : ‘portrait‘;
}
htmlNode.setAttribute(‘class‘,orientation);
};
if(supportOrientation){
window.addEventListener(‘orientationchange‘,updateOrientation,false);
}else{
//监听resize事件
window.addEventListener(‘resize‘,updateOrientation,false);
}
updateOrientation();
};
window.addEventListener(‘DOMContentLoaded‘,init,false);
})();
时间: 2024-08-10 12:19:41

移动端--判断横竖屏的相关文章

orientation属性判断横竖屏

现在有一个需求:移动端网页默认竖屏显示,当用户横屏浏览,就给予相应提示,比如横屏时显示下面截图提示信息 几年前,可能大家想到用 window.orientation 属性来实现,现官方已弃用,不做推荐,并且有了更好的实现方式—— orientation orientation: portrait(竖屏,即设备中的页面可见区域高度>=宽度) orientation: landscape(横屏,即设备中的页面可见区域高度<=宽度) 下面是一个很简单的 demo,有兴趣的小伙伴可以感受一下 <

iOS开发之判断横竖屏切换

/** *  当屏幕即将旋转的时候调用 * *  @param toInterfaceOrientation 旋转完毕后的最终方向 *  @param duration  旋转动画所花费的时间 */ - (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration { if (UIInterfaceOrientation

android 判断横竖屏的方法(转)

public boolean isScreenChange() { Configuration mConfiguration = this.getResources().getConfiguration(); //获取设置的配置信息 int ori = mConfiguration.orientation ; //获取屏幕方向 if(ori == mConfiguration.ORIENTATION_LANDSCAPE){ //横屏 return true; }else if(ori == mC

js和css实现检测移动设备方向的变化并判断横竖屏

方法一: 本地的window.matchMedia方法允许实时媒体查询. 代码如下: var mql = window.matchMedia("(orientation: portrait)"); // 如果有匹配,则我们处于垂直视角 if(mql.matches) {// 直立方向 alert("1") } else {//水平方向 alert("2") } // 添加一个媒体查询改变监听者 mql.addListener(function(m

JS检测移动端横竖屏的代码

这篇文章主要介绍了JS检测移动端横竖屏的代码,需要的朋友可以参考一下 使用media来判断屏幕宽度遇到的问题: ios上当我旋转屏幕的时候可行,但是安卓机上没反应,横屏显示的还是我竖屏的样式. 查了一下资料,css3的media如果要在移动端有较好的显示效果,需要在页头加上这段代码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-s

JS 判断ipad android 等移动设备横竖屏代码 源码--AangJava

废话不多说,直接进入正题! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <title> JS 判断ipad android 等移动设备横竖屏代码 源码--AangJava</

New UI-获取手机屏幕尺寸与分辨率,屏幕适配,横竖屏问题

New UI-获取手机屏幕尺寸与常用分辨率,屏幕适配,横竖屏问题 --转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途! 小猪Android开发交流群已建立,欢迎大家加入,无论是新手,菜鸟,大神都可以,小猪一个人的 力量毕竟是有限的,写出来的东西肯定会有很多纰漏不足,欢迎大家指出,集思广益,让小猪的博文 更加的详尽,帮到更多的人,O(∩_∩)O谢谢! 小猪Android开发交流群:小猪Android开发交流群群号:421858269 新Android UI实例大全目录:http:/

(一〇八)iPad开发之横竖屏适配

在iPad开发中,横竖屏的视图常常是不同的,例如侧边栏Dock,在横屏时用于屏幕较宽,可以展示足够多的内容,每个按钮都可以展示出标题:而竖屏时Dock应该比较窄,只显示图标不现实按钮标题. iPad比较重要的知识是不同类型设备的宽高在以点为单位的图形坐标系下固定为768x1024,因此常常利用此值来判断横竖屏. 768.1024.横竖屏判断很常用,可以定义一个公共的常量文件来放这些内容. [常量和宏的定义] ①在.m文件中,定义变量,加上const,注意指针(例如NSString*)使用的是常量

iOS iPad开发之横竖屏适配

1. 做横竖屏适配的时,需要判断当前状态是横屏还是竖屏,有两种方法: 第1种:[UIScreen mainScreen].bounds.size.width == 768 优点:把这个抽成宏之后,随时可以判断横竖屏, #define Lanscape ([UIScreen mainScreen].bounds.size.width == 768) 缺点:只在iOS8可行,也就是说在iOS8中横屏的width=1024,竖屏的width=768; 而在iOS7上,横竖屏的width=768 第2种