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

　　

　　几年前，可能大家想到用 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. Spring面试题总结的很全面，附带超详细答案

    1.什么是Spring? Spring是一个开源的Java EE开发框架.Spring框架的核心功能可以应用在任何Java应用程序中,但对Java EE平台上的Web应用程序有更好的扩展性.Sprin ...

  2. python计算不规则图形面积算法

    介绍:大三上做一个医学影像识别的项目,医生在原图上用红笔标记病灶点,通过记录红色的坐标位置可以得到病灶点的外接矩形,但是后续会涉及到红圈内的面积在外接矩形下的占比问题,有些外接矩形内有多个红色标记,在 ...

  3. MySQL 8.0.18安装教程(windows 64位)

    目录 1-先去官网下载点击的MySQL的下载​ 2-配置初始化的my.ini文件的文件3-初始化MySQL4-安装MySQL服务 + 启动MySQL 服务5-连接MySQL + 修改密码 * 第一项 ...

  4. 五分钟看懂UML类图与类的关系详解

    在画类图的时候,理清类和类之间的关系是重点.类的关系有泛化(Generalization).实现(Realization).依赖(Dependency)和关联(Association).其中关联又分为 ...

  5. es7之修饰器

    什么是修饰器 修饰器其实就是一个普通的函数,用来修饰类以及类的方法. 比如: @test class DecoratorTest { } function test(target) { target. ...

  6. bit和byte的区别是什么？

    bit(位/比特):计算机运算的基础单位: byte(字节):计算机中文件大小的基本计量单位. 转换关系:8 bit = 1 Byte1024 Byte = 1 KB1024 KB = 1 MB102 ...

  7. 深度解析.NetFrameWork/CLR/C# 以及C#6/C#7新语法

    一:什么是.NetFrameWork/ CLR / C# 1:.NetFramework即架构,它是一个语言开发软件,提供了软件开发的框架,使开发更具工程性.简便性和稳定性,这个框架主要是针对于c#语 ...

  8. MacOS上传文件到windows ftp时链接文件不见了

    最近打包遇到了一个问题,打包完MAC的sdk包后,得到的是一个framework的文件夹,我们需要将这个framework传到ftp服务器上,另外,还要把这个文件夹下的Release文件夹里的文件替换 ...

  9. android SDK安装Failed to fetch URL http://dl-ssl.google.com/android/repository/addons_list-1.xml出错 解决方案

    更换代理服务器:http://mirrors.neusoft.edu.cn 端口:80 reload 解决 若以上不成功在hosts文件中添加以下内容 #Google主页203.208.46.146 ...

  10. GAN与VAE

    经典算法·GAN与VAE Generative Adversarial Networks 及其变体 生成对抗网络是近几年最为经典的生成模型的代表工作,Goodfellow的经典工作.通过两个神经网络结 ...