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

　　

　　几年前，可能大家想到用 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. 简单的python GUI例子

    写一个简单的界面很容易,即使是什么都不了解的情况下,这个文本转载了最简单的界面编写,下个文本介绍了TK的简单但具体的应用 在python中创建一个窗口,然后显示出来. from Tkinter imp ...

  2. CSS 基础面试题

    1 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? 标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin 低版本IE盒子模型:宽 ...

  3. ssh-agent的作用

    明明在github上配置了ssh公钥,拉代码时却报错: sign_and_send_pubkey: signing failed: agent refused operation 解决方法:在~/.z ...

  4. 安卓微信对接H5微信支付出现“商家参数有误，请联系商家解决”的问题处理

    最近遇到客户在对接我们微信支付的时候,一些商家反馈在用户支付的过程中会出现报错,出错的截图如下: 查看微信官方文档如下:https://pay.weixin.qq.com/wiki/doc/api/H ...

  5. GSOAP服务卡住？

    很久以前参考了https://www.genivia.com/doc/soapdoc2.html 中的一段: How to Create a Multi-Threaded Stand-Alone Se ...

  6. fatal error: openssl/bn.h: No such file or directory

    出现如下错误 fatal error: openssl/bn.h: No such file or directory 解决办法 # sudo apt-get install libssl-dev

  7. inndo 表与存储逻辑_1

    ------------------------------------------2015-03-03--------------------------------------- 表 : inno ...

  8. K3 主控台创建

    /*================================================== FFFFFF OOOO GGGG EEEEEE RRRR SSSS ###### FF OO ...

  9. Linux Workqueue【转】

    转自:http://kernel.meizu.com/linux-workqueue.html 21 August 2016   Workqueue 是内核里面很重要的一个机制,特别是内核驱动,一般的 ...

  10. 关于Apache本地能访问外网不能访问的问题

    title: 关于Apache本地能访问外网不能访问的问题 date: 2018-08-05 19:22:12 tags: web --- 在配置apache和tomcat时,把它们都配置好,放到服务 ...