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

  

  几年前,可能大家想到用 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. jvm常用排错命令

    jvm命令很多,有一篇博客整理的非常全 https://www.cnblogs.com/ityouknow/p/5714703.html.我只列举一些常用的排错用到的. jps   -l   -v  ...

  2. Linux 的一些命令记录

    FTP:https://www.cnblogs.com/leoxuan/p/8329998.html YUM:https://blog.csdn.net/allyli0022/article/deta ...

  3. 【Android】天气应用

    模仿华为的"天气"应用写的一个小Demo.部分功能.动画效果没有实现,也没有过多考虑性能.Bug等其它方面的因素.写这个Demo的初衷是想熟悉下目前网上常用的一些框架. Demo采 ...

  4. OC-加载h5富文本的代码,并计算高度

    参考文章: 加载富文本的h5代码:https://zhidao.baidu.com/question/1510839173546014340.html 计算富文本的高度:https://zhidao. ...

  5. Jenkins的CI持续集成

    Jenkins的CI持续集成 全局配置 系统管理->全局工具配置,配置Git,JDK和Maven 1)解压maven到当前目录 tar zxf apache-maven-3.5.4-bin.ta ...

  6. IEDA创建Springboot项目

    随着技术的更新对于开发速度的追求,我们越来越不能忍受的是Spring框架对于集成开发以后大量的配置问题.所以SprigBoot应运而生,SpringBoot框架其实就是在Spring框架的外边包裹上了 ...

  7. Linux Workqueue【转】

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

  8. 001-Zabbix 服务安装

    Zabbix 服务安装 [官方地址]点我快速打开文章 1.安装 Zabbix 1.1 下载 Zabbix 清华源 rpm -ivh https://mirrors.tuna.tsinghua.edu. ...

  9. MATLAB之指定文件读取与读取地址输出

    一.读取指定文件夹下的指定格式文件 (1) 利用命令 uigetdir('','') 参数解释: uigetdir('所要打开的盘地址','对打开的弹出框进行描述') 例如:uigetdir('C:\ ...

  10. 如何有效的清理yum缓存

    如果遇到下面问题,请执行下面命令   yum clean all   #清除缓存