判断横屏竖屏（三种）

2024-03-29 14:02:27

在做移动端页面的时候经常会遇到需要判断横屏还是竖屏。下面将目前已知的通过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为倒过来的竖屏模式）；

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码

其实主要是通过window.orientation实现,下面看下代码吧复制代码代码如下: function orient() {if (window.orientation == 90 || window.orientation == -90) {//ipad.iphone竖屏:Andriod横屏$("body").attr("class", "landscape");orientation = 'landscape';return fals
Android判断屏幕是横屏或是竖屏的简单实现方法

本文所述为一个Android的常用技巧代码,主要用于判断手机屏幕是横向或是竖向的,在判断屏幕水平或垂直后你可以对程序做出相应的响应,该实例代码只是判断是否为竖屏,若判断正确返回true,否则返回false. 具体的程序代码如下: package com.lurencun.cfuture09.androidkit.util.ui; import android.content.Context; import android.content.res.Configuration; public cla
使用JavaScript判断手机浏览器是横屏还是竖屏问题

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

在做移动端页面的时候经常会遇到需要判断横屏还是竖屏.下面将目前已知的通过HTML,CSS,JS三种判断方法记录下来,方便以后翻阅. 1.通过在html中分别引用横屏和竖屏的样式: <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow" > //引用竖屏的CSS
C# 中Excel导入时判断是否被占用三种方法

C# 中Excel导入时判断是否被占用三种方法 Excel导入时判断是否被占用,三种方法: 1:Win7可以,WIN10不可以 try { //原理,如果文件可以被移动,说明未被占用 string strPath = "C:\\123OK.Excel"; string strPath2 = "C:\\123OK22.Excel"; File.Move(strPath, strPath2); File.Move(strPath2, strPath); } catc
android中Webview实现截屏三种方式小结

本人最近学习了android中Webview实现截屏三种方式,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. 第一种方式通过调用webview.capturePicture(),得到一个picture对象,根据图像的宽和高创建一个Bitmap,再创建一个canvas,绑定bitmap,最后用picture去绘制. //获取Picture对象 Picture picture = wv_capture.capturePicture(); //得到图片的宽和高(没有reflec
Android屏幕旋转之横屏竖屏切换的实现

刚实现了App内手机横/竖放置时,屏幕横/竖屏的切换.记录一下中间需要的关键信息和实现过程. 开门见山的说,实现屏幕自动/手动旋转的方式有两种: 一种是在工程的代码中定义,这种方式在横竖屏切换时执行的操作是:销毁当前Activity–根据新的屏幕尺寸重建Activity.如果不进行数据存储的操作,在切换的过程中Activity中的数据会丢失. 另一种是在工程的AndroidManifest.xml中定义,这种定义的方式在某些情况下可以实现"不销毁需要横竖屏的Activity",因为这种
js判断变量初始化的三种形式及推荐用的形式

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> //js判断变量初始化有三种形式 var x; if (x == null) { alert("x为null"); } if (typeof (x) == "undefined&qu
Android如何禁止横屏竖屏的变换

android4.0 禁止横竖屏切换使用 android:configChanges="orientation|keyboardHidden"无效在之前的版本中都是在Manifest文件中设置Activity的 android:configChanges="orientation|keyboardHidden",但是在android4.0中无效,最后发现是需要加其他一个属性:"screenSize" 改成这样就可以了 : android:con
Android禁止横屏竖屏切换的有效方法

在Android中要让一个程序的界面始终保持一个方向,不随手机方向转动而变化的办法: 只要在AndroidManifest.xml里面配置一下就可以了. 在AndroidManifest.xml的activity(需要禁止转向的activity)配置中加入android:screenOrientation="landscape"属性即可(landscape是横向,portrait是纵向).例如: <?xml version="1.0" encoding=&qu
移动端使用CSS或JS判断横屏和竖屏的讲解

在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 首先在head中加入如下代码: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 针对上述viewport标签有如下说明 1).content中的width
Android编程判断横屏、竖屏及设置横竖屏的方法

本文实例讲述了Android编程判断横屏.竖屏及设置横竖屏的方法.分享给大家供大家参考,具体如下: 还是这个手机项目,有一个需求是整个工程中只有刚进去的界面允许横屏显示,并且要将该界面的标题隐藏,当切换回竖屏显示的时候,标题变为可见,一开始我百度了一下有一个监听activity是否横屏竖屏的监听函数,如下: // 橫屏不重新加載activity,調用該方法 @Override public void onConfigurationChanged(Configuration newConfig)

判断横屏竖屏（三种）

相关推荐

随机推荐