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 来源:设计与开发 ...
随机推荐
- 基于angular写的一个todolist
对于新手来说,使用angularjs写一个todolist可以快速入门
- RequireJS基础(二)
上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute. RequireJS使用define来定义 ...
- 我的第一个WP8.1应用总结
我的LUMIA925已经买了很久了,想自己开发WP应用放在上面,却一直想不到有什么特别的想法和需要.前几天的事情正好让我有了这个机会. 前几天在客户机房工作的时候,同事打电话来说另一个客户由于换了电脑 ...
- Android开发--仿微信语音对讲录音
原文地址:http://www.2cto.com/kf/201502/378704.html 自微信出现以来取得了很好的成绩,语音对讲的实现更加方便了人与人之间的交流.今天来实践一下微信的语音对讲的录 ...
- Qt窗口添加鼠标移动拖拽事件
1. .h文件中添加 private: QPoint dragPosition; 2. 在cpp文件中重写鼠标点击和拖拽函数 void ShapeWidget::mousePressEvent( ...
- php的进制转换
学习了php的进制转换,有很多的知识点,逻辑,也有最原始的笔算,但是我们还是习惯使用代码来实现进制的转换,进制的转换代码有如下:二进制(bin)八进制( oct)十进制( dec)十六进制( hex) ...
- HTTPS (HTTP Secure)
what is HTTPS HTTPS = HTTP + TSL Hypertext Transfer Protocol Secure (HTTPS) is acommunications proto ...
- Android根据文件路径使用File类获取文件相关信息
Android通过文件路径如何得到文件相关信息,如 文件名称,文件大小,创建时间,文件的相对路径,文件的绝对路径等: 如图: 代码: public class MainActivity extends ...
- 在各方面还没准备好的时候,大家一定要慎用border-box样式!!!!
这几天,我被一个js问题困扰到癫狂了! 事情是这样的,我之前写了个功能非常复杂的纯jquery代码的前端gridview控件,实现了大量的功能和效果,在一些项目里也用得很好. 最近有个项目,样式做了调 ...
- ios -网络加载json和本地加载json
1网络加载json的时候,要在模型的实现文件里写: - (void)setValue:(id)value forKey:(NSString *)key { } 2本地加载json的时候,要在模型的实现 ...