现在有一个需求：移动端网页默认竖屏显示，当用户横屏浏览，就给予相应提示，比如横屏时显示下面截图提示信息

　　

　　几年前，可能大家想到用 window.orientation 属性来实现，现官方已弃用，不做推荐，并且有了更好的实现方式—— orientation

　　orientation: portrait（竖屏，即设备中的页面可见区域高度>=宽度）

　　orientation: landscape（横屏，即设备中的页面可见区域高度<=宽度）

　　下面是一个很简单的 demo，有兴趣的小伙伴可以感受一下

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>识别横竖屏</title>

        <style>

            @media (orientation: landscape) {

                body {

                    background-color: #ccc;

                }

            }

            @media (orientation: portrait) {

                body {

                    background-color: #000;

                }

            }

        </style>

    </head>

    <body>

    </body>

</html>

orientation属性（判断是否为横竖屏）的更多相关文章

  1. js判断手机的横竖屏调整样式

    在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...

  2. 基于zepto判断mobile的横竖屏状态

    借用jquery mobile中的代码,删除了一些多余的部分,简单的基于zepto的模块 var CheckOrientation = (function(){ var win = $( window ...

  3. PHP 中 Orientation 属性判断上传图片是否需要旋转(转)

    <?php $image = imagecreatefromstring(file_get_contents($_FILES['image_upload']['tmp_name'])); $ex ...

  4. css3媒体查询判断移动设备横竖屏

    /* 设备竖屏时调用该段css代码 */ @media all and (orientation : portrait){ body{   background-color:blue;  } } /* ...

  5. JS判断手机横竖屏

    在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientat ...

  6. HTML5横竖屏提示

    HTML代码: <div class="screen-prompt"></div> CSS判断代码: /*横竖屏提示*/ @media screen and ...

  7. android:configChanges 屏幕横竖屏切换

    出处:http://blog.csdn.net/djy1992/article/details/9378195 --->  android:screenOrientation="por ...

  8. 测试横竖屏切换时activity 的生命周期

    对于这个面试题,相信大家都见过,网上给出的答案是: 1.不设置Activity的android:configChanges时,切屏会重新调用各个生命周期,切横屏时会执行一次,切竖屏时会执行两次 2.设 ...

  9. Android 面试之横竖屏切换的Activity生命周期

    public class EngineerJspActivity extends Activity { private static String Tag = "EngineerJspAct ...

随机推荐

  1. B-Tree详解

    之前写过一篇关于索引的文章<SQL夯实基础(五):索引的数据结构>,这次我们主要详细讨论下B-Tree. B-树 B-tree,即B树,而不要读成B减树,它是一种多路搜索树(并不是二叉的) ...

  2. img error 图片加载失败的最佳方案

    有时候, 当img的src加载失败, 会显示缺省碎片图片,  影响用户体验.  有一个js事件onerror就派上了用场. 它可以在加载失败时, 显示缺省的图片. 它有两种使用方式. 第一种: 使用纯 ...

  3. Java中配置文件的三种配置位置及读取方式

    XML 和properties properties: 1.存放于src根目录下 //获取到同包下的资源文件,将其转换成流对象 //InputStream is= PropertiesDemo.cla ...

  4. python验证码处理(1)

    目录 一.普通图形验证码   这篇博客及之后的系列,我会向大家介绍各种验证码的识别.包括普通图形验证码,极验滑动验证码,点触验证码,微博宫格验证码. 一.普通图形验证码   之前的博客已向大家介绍了简 ...

  5. 使用Debug Diagnostic Tool排除内存泄漏故障

    在我之前的博文中(SQL Server内存泄漏),我解释了如何使用“!heap”命令识别哪个模块泄漏了内存.有时我们使用“!d”命令来找到模型或者使用搜索内存命令(s)不能通过显示内存找到原因. 在这 ...

  6. 常用的linux命令大全

    之前做过两年的运维,用过很多命令,深切体会到某些linux命令熟练掌握后对效率提升有多大.举个简单的例子,在做了研发后经常会有跑一些数据,对于结果数据的处理,我们的产品同学一般都习惯于用excel做统 ...

  7. windows API下的模板缓冲（stencil buffer）

    在windows API搭建的OpenGL窗口中使用模板缓冲,需要在像素格式描述表中设置stencil buffer位宽为8,这样窗口会自动生成stencil buffer,然后可以在opengl环境 ...

  8. java XML解析防止外部实体注入

    /** * 增加防止部实体注入逻辑 * <功能详细描述> * @param reader * @throws SAXException * @see [类.类#方法.类#成员] */ pu ...

  9. 使用jmeter进行压力测试及如何添加负载机

    Jmeter是一款简单灵活且强大的性能测试工具,同时也可以做接口测试. 由于初识jmeter,今天来记录一下如何对一个web进行一个简单的压力测试. 1.首先在测试计划里面添加一个线程组,然后再其下面 ...

  10. 201871010136—赵艳强《面向对象程序设计（java）》第十三周学习总结

    201871010136—赵艳强<面向对象程序设计(java)>第十三周学习总结   博文正文开头格式:(2分) 项目 内容 <面向对象程序设计(java)> https:// ...