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( '横屏状态!' ); } }, false ); //移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。 |
屏幕方向对应的window.orientation值:
ipad,iphone: 90 或 -90 横屏
ipad,iphone: 0 或180 竖屏
Andriod:0 或180 横屏
Andriod: 90 或 -90 竖屏
HTML5中判断横屏竖屏的更多相关文章
- Android判断横屏竖屏代码
// 判断Android当前的屏幕是横屏还是竖屏.横竖屏判断 if (this.getResources().getConfiguration().orientation == Configurati ...
- 用JavaScript判断横屏竖屏问题。JavaScript代码如下【转】
/判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert(" ...
- 用JavaScript判断横屏竖屏问题
判断手机横竖屏状态: //判断手机横竖屏状态: function hengshuping() { if(window.orientation == 180 || window.orientation= ...
- JavaScript判断横屏/竖屏
/判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ ...
- 判断横屏竖屏,然后CSS重新计算
function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态!") ...
- javascript判断手机旋转横屏竖屏
javascript判断手机旋转横屏竖屏 // 横屏竖屏函数 function orientationChange(){ switch(window.orientation) { case 0: // ...
- Python--将文件夹中图片按照横屏竖屏进行分类
搬运链接:https://www.jianshu.com/p/c8be54282e77 """ 可以遍历输入的路径的指定后缀的文件,主要是用来筛选图片,将图片分成 横屏, ...
- 转载:Android横屏竖屏切换的问题
一.禁止横竖屏转换 Android横竖屏切换在手机开发中比较常见,很多软件在开发过程中为了避免横竖屏切换时引发不必要的麻烦,通常禁止掉横竖屏的切换, 通过在AndroidManifest.xml中设置 ...
- 【转】Android 模拟器横屏竖屏切换设置
http://blog.csdn.net/zanfeng/article/details/18355305# Android 模拟器横屏竖屏切换设置时间:2012-07-04 来源:设计与开发 ...
随机推荐
- {Latex}{Tabular}文本超出表格自动换行
用p或者m可以控制每列的宽度(需载入array宏包). 要整个表格相对于页面居中,用chngpage宏包的adjustwidth,如下: \documentclass[oneside]{article ...
- VC++ 实现VC程序启动时最小化到任务栏(完美解决闪烁问题)
之前写的一个VC应用程序,是程序启动时就直接出现在任务栏, 窗体不出现,等用户点击任务栏图标再出现窗口.和一些防火墙什么的软件类似. 这种效果实现并不是很困难的,硬是找不到最好的.为什么呢? 首先,在 ...
- Python执行系统命令的方法 os.system(),os.popen(),commands
os.popen():用python执行shell的命令,并且返回了结果,括号中是写shell命令 Python执行系统命令的方法: https://my.oschina.net/renwofei42 ...
- MVC Razor基础
@ 可以编写一条C#语句@{} 可以编写一组C#语句@: 将文字内容直接输出到页面上去@() 在一句中将一段C#代码包括起来,证明这一句完整的C#代码 Razor解决路径问题: Html.Action ...
- Myeclipse2016部署tomcat服务(别的服务类似)配置环境
1.在工具MyEclipse的项目管理菜单中,右单机找Properties或者快捷键alt+enter,(或者直接搜索Runtimes)myEclipse/Targeted Runtimes 2.ne ...
- cordova常用资料源
cordova的中文资料https://github.com/CordovaCn/CordovaCn 官方文档: http://cordova.apache.org/docs/en/latest/ E ...
- delphi安装 Tclientsocket, Tserversocket控件
菜单component->Install Packets按Add按钮,选择delphi目录里的bin目录下的dclsockets70.bpl(delphi2010是 dclsockets140. ...
- Redis在windows下安装和PHP中使用
1.redis简介redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(so ...
- Data import/export of Netezza using external table
Introduction External table is a special table in Netezza system, which could be used to import/exp ...
- 手机版 div拖动
<!doctype html> <html> <head> <title></title> <script type="te ...