判断横屏竖屏(三种)
在做移动端页面的时候经常会遇到需要判断横屏还是竖屏。下面将目前已知的通过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为倒过来的竖屏模式);
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
相关推荐
-
Android判断屏幕是横屏或是竖屏的简单实现方法
本文所述为一个Android的常用技巧代码,主要用于判断手机屏幕是横向或是竖向的,在判断屏幕水平或垂直后你可以对程序做出相应的响应,该实例代码只是判断是否为竖屏,若判断正确返回true,否则返回false. 具体的程序代码如下: package com.lurencun.cfuture09.androidkit.util.ui; import android.content.Context; import android.content.res.Configuration; public cla
-
基于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
-
使用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)
随机推荐
- Django中使用jquery的ajax进行数据交互的实例代码
- Go语言中转换JSON数据简单例子
- 详解基于angular路由的requireJs按需加载js
- javascript Prototype 对象扩展
- 极酷的javascirpt,让你随意编辑任何网页
- java实现汉字转unicode与汉字转16进制实例
- 几种判断asp.net中session过期方法的比较
- WPF字体或内容模糊的解决方法
- JS正则表达式之非捕获分组用法实例分析
- 详解C++编程中的重载流插入运算符和流提取运算符
- jQuery给元素添加样式的方法详解
- js检测浏览器版本、核心、是否移动端示例
- 解析WeakHashMap与HashMap的区别详解
- python插入排序算法的实现代码
- JS使用贪心算法解决找零问题示例
- 利用angular自动编译andriod APK的绕坑经历分享
- Pycharm新建模板默认添加个人信息的实例
- C++执行Linux Bash命令的方法
- android实现简易计算器
- JavaScript函数、闭包、原型、面向对象学习笔记