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

这里有两种方法:

一: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中判断横屏竖屏的更多相关文章

  1. Android判断横屏竖屏代码

    // 判断Android当前的屏幕是横屏还是竖屏.横竖屏判断 if (this.getResources().getConfiguration().orientation == Configurati ...

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

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

  3. 用JavaScript判断横屏竖屏问题

    判断手机横竖屏状态: //判断手机横竖屏状态: function hengshuping() { if(window.orientation == 180 || window.orientation= ...

  4. JavaScript判断横屏/竖屏

    /判断手机横竖屏状态:  function hengshuping(){    if(window.orientation==180||window.orientation==0){          ...

  5. 判断横屏竖屏,然后CSS重新计算

    function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态!") ...

  6. javascript判断手机旋转横屏竖屏

    javascript判断手机旋转横屏竖屏 // 横屏竖屏函数 function orientationChange(){ switch(window.orientation) { case 0: // ...

  7. Python--将文件夹中图片按照横屏竖屏进行分类

    搬运链接:https://www.jianshu.com/p/c8be54282e77 """ 可以遍历输入的路径的指定后缀的文件,主要是用来筛选图片,将图片分成 横屏, ...

  8. 转载:Android横屏竖屏切换的问题

    一.禁止横竖屏转换 Android横竖屏切换在手机开发中比较常见,很多软件在开发过程中为了避免横竖屏切换时引发不必要的麻烦,通常禁止掉横竖屏的切换, 通过在AndroidManifest.xml中设置 ...

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

    http://blog.csdn.net/zanfeng/article/details/18355305# Android 模拟器横屏竖屏切换设置时间:2012-07-04   来源:设计与开发   ...

随机推荐

  1. 基于angular写的一个todolist

    对于新手来说,使用angularjs写一个todolist可以快速入门

  2. RequireJS基础(二)

    上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute. RequireJS使用define来定义 ...

  3. 我的第一个WP8.1应用总结

    我的LUMIA925已经买了很久了,想自己开发WP应用放在上面,却一直想不到有什么特别的想法和需要.前几天的事情正好让我有了这个机会. 前几天在客户机房工作的时候,同事打电话来说另一个客户由于换了电脑 ...

  4. Android开发--仿微信语音对讲录音

    原文地址:http://www.2cto.com/kf/201502/378704.html 自微信出现以来取得了很好的成绩,语音对讲的实现更加方便了人与人之间的交流.今天来实践一下微信的语音对讲的录 ...

  5. Qt窗口添加鼠标移动拖拽事件

    1. .h文件中添加 private:    QPoint dragPosition; 2. 在cpp文件中重写鼠标点击和拖拽函数 void ShapeWidget::mousePressEvent( ...

  6. php的进制转换

    学习了php的进制转换,有很多的知识点,逻辑,也有最原始的笔算,但是我们还是习惯使用代码来实现进制的转换,进制的转换代码有如下:二进制(bin)八进制( oct)十进制( dec)十六进制( hex) ...

  7. HTTPS (HTTP Secure)

    what is HTTPS HTTPS = HTTP + TSL Hypertext Transfer Protocol Secure (HTTPS) is acommunications proto ...

  8. Android根据文件路径使用File类获取文件相关信息

    Android通过文件路径如何得到文件相关信息,如 文件名称,文件大小,创建时间,文件的相对路径,文件的绝对路径等: 如图: 代码: public class MainActivity extends ...

  9. 在各方面还没准备好的时候,大家一定要慎用border-box样式!!!!

    这几天,我被一个js问题困扰到癫狂了! 事情是这样的,我之前写了个功能非常复杂的纯jquery代码的前端gridview控件,实现了大量的功能和效果,在一些项目里也用得很好. 最近有个项目,样式做了调 ...

  10. ios -网络加载json和本地加载json

    1网络加载json的时候,要在模型的实现文件里写: - (void)setValue:(id)value forKey:(NSString *)key { } 2本地加载json的时候,要在模型的实现 ...