HTML5中判断横屏竖屏

HTML5中判断横屏竖屏

在移动端中我们经常碰到横屏竖屏的问题，那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。

这里有两种方法：

一：CSS判断横屏竖屏

写在同一个CSS中


1

2

3

4

5

6

@media screen and (orientation: portrait) {

  /*竖屏 css*/

}

@media screen and (orientation: landscape) {

  /*横屏 css*/

}

分开写在2个CSS中

竖屏


1

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

横屏


1

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

二：JS判断横屏竖屏


1

2

3

4

5

6

7

8

9

10

//判断手机横竖屏状态：

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {

        if (window.orientation === 180 || window.orientation === 0) {

            alert(‘竖屏状态！‘);

        }

        if (window.orientation === 90 || window.orientation === -90 ){

            alert(‘横屏状态！‘);
时间： 2024-12-15 06:51:01

HTML5中判断横屏竖屏的相关文章

移动端判断横屏竖屏

1. CSS判断横屏竖屏 写在同一个CSS中 @media screen and (orientation: portrait) { /*竖屏 css*/} @media screen and (orientation: landscape) { /*横屏 css*/}分开写在2个CSS 竖屏<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css

用JavaScript判断横屏竖屏问题

判断手机横竖屏状态: 1 //判断手机横竖屏状态: 2 3 function hengshuping() { 4 if(window.orientation == 180 || window.orientation==0){ 5 alert("竖屏状态!");} 6 } 7 if(window.orientation == 90 || window.orientation == -90){ 8 alert("横屏状态!") 9 } 10 window.addEven

JavaScript判断横屏/竖屏

/判断手机横竖屏状态:  function hengshuping(){    if(window.orientation==180||window.orientation==0){          alert("竖屏状态!")            }  if(window.orientation==90||window.orientation==-90){          alert("横屏状态!")              }   }  window.a

用JavaScript判断横屏竖屏问题。JavaScript代码如下【转】

/判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态!") } if(window.orientation==90||window.orientation==-90){ alert("横屏状态!") } } window.addEventListener("onorientationchange" in

javascript判断手机旋转横屏竖屏

javascript判断手机旋转横屏竖屏 // 横屏竖屏函数 function orientationChange(){ switch(window.orientation) { case 0: // Portrait case 180: // Upside-down Portrait //Javascript to setup Portrait view window.location.reload(); break; case -90: // Landscape: turned 90 deg

手机横屏竖屏css

@media是css3中新定义的,功能非常强大,顾名思义PC是无法匹配横竖屏的,所以orientation只对移动设备起效. 1.头部声明 复制代码 代码如下: <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0"> 加到 复制代码 代码如下: <head></head> 2.

Android横屏竖屏切换的问题

一.禁止横竖屏转换 Android横竖屏切换在手机开发中比较常见,很多软件在开发过程中为了避免横竖屏切换时引发不必要的麻烦,通常禁止掉横竖屏的切换, 通过在AndroidManifest.xml中设置activity中的android:screenOrientation属性值来实现. 比如下列设置 android:screenOrientation="portrait" 则无论手机如何变动,拥有这个属性的activity都将是竖屏显示. android:screenOrientatio

Android学习笔记（三六）：横屏竖屏的切换

1.准备环境 对模拟器,只要“Ctrl+F12“,就可以可以实现竖屏(portrait)和横屏(landscape)的切换. 2.UI的屏幕切换实现 下面一个简单的例子,如图. 我们需要写两个Android XML文件,假定文件为chapter_19_test1.xml,放在常规目录位置layout/内容如下: [plain] view plaincopy <?xml version="1.0" encoding="utf-8"?> <Linear

【转】Android 模拟器横屏竖屏切换设置

http://blog.csdn.net/zanfeng/article/details/18355305# Android 模拟器横屏竖屏切换设置时间:2012-07-04   来源:设计与开发   作者:Daniel   点击:5571 摘要:  Android 模拟器旋转,横屏.竖屏切换设置,android 横屏布局,android 横屏模式,android 模拟器,android 模拟器横屏,android 模拟...       Android 模拟器旋转,横屏.竖屏切换设置,andr