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

　　

　　几年前，可能大家想到用 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验证码处理(1)

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

  2. JavaWeb之文件上传和下载

    在如今的互联网时代,人们越来越喜欢将自己的数据存放到互联网上,于是便诞生了很多类型的软件,比如360网盘,百度网盘,云盘之类的.所以说,文件上传和下载的功能是现在非常主流的一个功能,应用十分广泛. 那 ...

  3. sparkSQL中的example学习(1)

    SparkSQLDemo.scala import org.apache.spark.sql.{Row, SparkSession} import org.apache.spark.sql.types ...

  4. Django restframework 序列化之 ModelSerializer 小记

    首先介绍一下相关概念 序列化器(Serializer) 1. 自定义型:  继承rest_framework.serializers.Serializer 2. 模型类型:  继承rest_frame ...

  5. win10无法在桌面右键快捷打开个性化设置、显示设置，在任务栏右键无法快捷打开任务栏设置

    Win+R,输入regedit,定位到HKEY_CURRENT_USER\Software\Classes\ 找到列表中的ms-settings 将其删除即可解决! 转自百度知道

  6. 002-Zabbix 前端配置

    Zabbix 前端配置 [基于此文章的环境]点我快速打开文章 [官方地址]点我快速打开文章 第 1 步 在浏览器中,打开 Zabbix URL:http:// <server_ip_or_nam ...

  7. Invitation Cards POJ - 1511

    题目链接:https://vjudge.net/problem/POJ-1511 思路:题目意思就是,从1出发到所有城市,再从所有城市回到1的最短时间. 那么我们只要正跑一次图,然后反向存边,再跑一次 ...

  8. echarts-带面积的折线图

    测试地址 https://gallery.echartsjs.com/editor.html?c=x6p5SsIEzt var listN = '高温'; var unit = '°C'; //单位 ...

  9. c# 第15节 StringBuilder

    本节内容: 1:StringBuilder 2:内容总结 1:StringBuilder 实例: 2:内容总结 项目:

  10. CF1045B Space Isaac

    原题链接 DOWNLOAD AS PDF 题目大意 \(0\sim m-1\)的数被分成两个集合,你可以分别从两个集合中取一个数相加并对\(m\)取模,求一不能构造出的数. 题解 感觉如果\(\col ...