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

方法一：用触发手机的横屏和竖屏之间的切换的事件

代码如下:

window.addEventListener("orientationchange", function() {

// 宣布新方向的数值

alert(window.orientation);

}, false);

方法二：监听调整大小的改变

代码如下:

window.addEventListener("resize", function() {

// 得到屏幕尺寸 (内部/外部宽度，内部/外部高度)

}, false);

css判断横竖屏幕

代码如下:

/* portrait */

@media screen and (orientation:portrait) {

/* portrait-specific styles */

}

/* landscape */

@media screen and (orientation:landscape) {

/* landscape-specific styles */

}

本地window.matchMedia方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角：

代码如下:

var mql = window.matchMedia("(orientation: portrait)");

// 如果有匹配，则我们处于垂直视角

if(mql.matches) {

// 直立方向

alert("1")

} else {

//水平方向

alert("2")

}

// 添加一个媒体查询改变监听者

mql.addListener(function(m) {

if(m.matches) {

// 改变到直立方向

document.getElementById("test").innerHTML="改变到直立方向";

}

else {

document.getElementById("test").innerHTML="改变到水平方向";

// 改变到水平方向

}

});

赞 (0)

相关推荐

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

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

    使用media来判断屏幕宽度遇到的问题: ios上当我旋转屏幕的时候可行,但是安卓机上没反应,横屏显示的还是我竖屏的样式. 查了一下资料,css3的media如果要在移动端有较好的显示效果,需要在页头加上这段代码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 可是这段代码我不能用.因为我

  • 更靠谱的H5横竖屏检测方法（js代码）

    更靠谱的H5横竖屏检测方法（js代码）

    前不久,做了一个H5项目,需要在横竖屏变化时,做一些处理.毫无疑问,需要使用orientationchange来监听横竖屏的变化. 方案一: // 监听 orientation changes window.addEventListener("orientationchange", function(event) { // 根据event.orientation|screen.orientation.angle等于0|180.90|-90度来判断横竖屏 }, false); 代码添加上

  • android实现在横竖屏切换时页面信息不被重置的示例分享

    当屏幕转动切换的时候 Android 机制是:销毁当前屏幕的 Activity ,然后重新开启一个新的适应屏幕改变的 Activity .那么,我们该如何在屏幕切换的时候页面信息不被重置呢? 解决实现:1.在 AnroidMainifest.xml 的 activity 元素中加入: 复制代码 代码如下: android:configChanges="orientation|keyboardHidden" 或 复制代码 代码如下: android:configChanges="

  • javascript判断iphone/android手机横竖屏模式的函数

    查了不少资料,最后结论如下: 复制代码 代码如下: function orientationChange(){ switch(window.orientation) { case 0: // Portrait case 180: // Upside-down Portrait // Javascript to setup Portrait view break; case -90: // Landscape: turned 90 degrees counter-clockwise case 90

  • 解析Android横竖屏切换的问题

    在做android 开发时,在默认情况下当屏幕从竖评变到横屏时会触发 onConfigurationChanged 事件 在默认情况下会重新加载画面并显示和横评一样的画面,这样会有2个问题,布局问题,在竖屏 显示的布局到横屏中由于宽和高发生了变化所有多少都会影响到布局(除非你定制2套画面在然后加个判断在横屏时怎么显示,在竖屏时怎么显示),当然最简单的办法就是在项目的 AndroidManifest.xml中找到你所指定的activity 中加上 只竖屏显示的话(android:screenOri

  • android 横竖屏限制的配置方法

    在开发android的应用中,有时候需要限制横竖屏切换.只需要在AndroidManifest.xml文件中加入android:screenOrientation属性限制.ndroid:screenOrientation="landscape"是限制此页面横屏显示, ndroid:screenOrientation="portrait"是限制此页面数竖屏显示. 例如:我现在想让所有的页面不管怎么样都竖屏显示,则我的AndroidManifest.xml应该这样写:

  • android横竖屏切换不重启activity解决方案

    部分网友会发现Activity在切换到后台或布局从横屏LANDSCAPE切换到PORTRAIT,会重新切换Activity会触发一次onCreate方法,我们可以在androidmanifest.xml中的activit元素加入这个属性Android:configChanges="orientation|keyboardHidden" 即可,比如 <activity android:name=".android123" android:configChange

  • android 判断横竖屏问题的详解

    Android横竖屏要解决的问题应该就两个:一.布局问题:二.重新载入问题.1.布局问题:如果不想让软件在横竖屏之间切换,最简单的办法就是在项目的 AndroidManifest.xml中找到你所指定的activity中加上android:screenOrientation属性,他有以下几个参数:"unspecified" 默认值 由系统来判断显示方向.判定的策略是和设备相关的,所以不同的设备会有不同的显示方向. "landscape" 横屏显示(宽比高要长) &q

  • js判断横竖屏及禁止浏览器滑动条示例

    复制代码 代码如下: var $horizontal = $('.horizontal_screen') ; //可自定义横屏模式提示样式 var $document = $(document) ; var preventDefault = function(e) { e.preventDefault(); }; var touchstart = function(e) { $document.on('touchstart touchmove', preventDefault); }; var

  • android横竖屏切换时候Activity的生命周期

    1.新建一个Activity,并把各个生命周期打印出来 2.运行Activity,得到如下信息 onCreate--> onStart--> onResume--> 3.按crtl+f12切换成横屏时 onSaveInstanceState--> onPause--> onStop--> onDestroy--> onCreate--> onStart--> onRestoreInstanceState--> onResume--> 4.再

随机推荐