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

　　

　　几年前，可能大家想到用 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. 来点高逼格的，使用前端Sendmessage实现SSO

    关于什么叫SSO(单点登录),这个概念具体的信息我就不详述了,网上一搜一大把,总的来说,它是一种可以控制各个独立的系统经过它的授权后, 可以用同一个帐号体系登录不同的系统,达到一处登录,多处使用的效果 ...

  2. 纯C语言实现顺序队列

    #include <stdio.h> #include <stdlib.h> #define MAXSIZE 6 typedef int QElemType; typedef ...

  3. Python【day 13】内置函数01

    1.python3.6.2 一共有 68个内置函数2.分成6个大类 1.反射相关-4个 2.面向对象相关-9个 3.作用域相关--2个 1.globlas() #注意:最后是s,复数形式 查看全局作用 ...

  4. delphi webbrowser用法集锦

    delphi webbrowser用法集锦 (2012-05-13 08:29:00) 标签: it 分类: 软件_Software WebBrowser1.GoHome; //到浏览器默认主页 We ...

  5. JDK1.8 —— 接口定义增强

    使用default和static定义接口方法 JDK1.8(jre8)以后,接口中不在仅仅只允许定义抽象方法,开始允许定义普通方法了:而普通方法需要用default声明. interface IMes ...

  6. JVM源码分析之MetaspaceSize和MaxMetaspaceSize的区别

    JVM加载类的时候,需要记录类的元数据,这些数据会保存在一个单独的内存区域内,在Java 7里,这个空间被称为永久代(Permgen),在Java 8里,使用元空间(Metaspace)代替了永久代. ...

  7. Django 练习班级管理系统四 -- 编辑班级

    修改 classes.html {% extends "layout.html" %} {% block css %} {% endblock %} {% block conten ...

  8. Mongodb基础 学习小结

    MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案.MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能 ...

  9. NCcat学习使用

    一.使用手册 1.简介:nc/NetCat是一款端口监听工具,可以用来建立系统之间的连接.传输文件.TCP代理等. 2.命令参数     nc [-options] hostname port[s] ...

  10. 2019 China Collegiate Programming Contest Qinhuangdao Onsite

    传送门 D - Decimal 题意: 询问\(\frac{1}{n}\)是否为有限小数. 思路: 拆质因子,看是不是只包含2和5即可,否则除不尽. Code #include <bits/st ...