js/css 检测移动设备方向的变化 判断横竖屏幕

方法一:用触发手机的横屏和竖屏之间的切换的事件

window.addEventListener("orientationchange", function() {

// 宣布新方向的数值

alert(window.orientation);

}, false);

// 方法二:监听调整大小的改变

window.addEventListener("resize", function() {

// 得到屏幕尺寸 (内部/外部宽度,内部/外部高度)

}, false);

css判断横竖屏幕

/* portrait */

@media screen and (orientation:portrait) {

/* portrait-specific styles */

}

/* landscape */

@media screen and (orientation:landscape) {

/* landscape-specific styles */

}

本地window.matchMedia方法允许实时媒体查询。我们可以利用以上媒体查询找到我们是处于直立或水平视角:

var mql = window.matchMedia("(orientation: portrait)");

// 如果有匹配,则我们处于垂直视角

if(mql.matches) {

// 直立方向

alert("1")

} else {

//水平方向

alert("2")

}

// 添加一个媒体查询改变监听者

mql.addListener(function(m) {

if(m.matches) {

// 改变到直立方向

document.getElementById("test").innerHTML="改变到直立方向";

}

else {

document.getElementById("test").innerHTML="改变到水平方向";

// 改变到水平方向

}

});

js/css 检测移动设备方向的变化 判断横竖屏幕的更多相关文章

  1. JS和css实现检测移动设备方向的变化并判断横竖屏幕

    这篇文章主要介绍了JS和css实现检测移动设备方向的变化并判断横竖屏幕,本文分别给出实现代码,需要的朋友可以参考下 方法一:用触发手机的横屏和竖屏之间的切换的事件  [自测可用, chrome , 手 ...

  2. Device.js – 快速检测平台、操作系统和方向信息

    在 Web 项目中,有时候我们需要根据程序运行的环境采取特定操作.Device.js 是一个很小的 JavaScript 库,它简化了编写和平台,操作系统或浏览器相关的条件 CSS 或 JavaScr ...

  3. js代码检测设备问题:为什么在移动端检测设备的时候会出现pc的页面

    为了在手机上也能正常显示页面,所以为之前写的页面又重写了一遍,专门用来在移动端显示,用js代码检测设备,如果是pc就显示pc的页面,如果是移动就显示移动的页面,但遇到一个问题就是在移动端打开会有一个延 ...

  4. 分享Grunt.js配置: watch + liveReload 实时监测文件变化自动刷新浏览器

    http://www.tuicool.com/articles/2eaQJn 用Grunt配置watch和liveReload组件,可以实时检测指定的文件变化并自动刷新浏览器.目前基本已经成为了我的必 ...

  5. 史上前端面试最全知识点(附答案)---html & js & css

    史上前端面试最全知识点(附答案) 一.html & js & css 1.AMD和CMD是什么?它们的区别有哪些? AMD和CMD是二种模块定义规范.现在都使用模块化编程,AMD,异步 ...

  6. node.js实现国标GB28181设备接入的sip服务器解决方案

    方案背景 在介绍GB28181接入服务器的方案前,咱们先大概给大家介绍一下为什么我们选择了用nodejs开发国标GB28181的服务,我大概给很多人介绍过这个方案,大部分都为之虎躯一震,nodejs在 ...

  7. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  8. gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  9. 勤能补挫-简单But易错的JS&CSS问题总结

    错误频率较高的JS&CSS问题 勤能补拙,不管是哪门子技术,在实践中多多总结,开发效率慢慢就会提升.本篇介绍几个经常出错的JS&CSS问题,包括事件冒泡.(使用offset.scrol ...

随机推荐

  1. 引用System.Runtime.Serialization.Json

    vs2012下,重新添加一次System.Runtime.Serialization的引用

  2. long类型在C#和C++中的异同

    C++中long是32位的整数类型.   而在C#中long是64位的,对应包装类型是Int64,int对应Int32.   显然C++中的long类型,而应该对应C#中的int,   C#调用C++ ...

  3. xml入门简介--两天学会xml

    前言 在很久以前,笔者曾见到过1000+页的xml书,里面还有n多的概念,XSL,Xquery,让人头痛.无奈最近需要用到,所以在w3c恶补了一下.以下大致整理了一下相关概念,但是对XSL等派生语言没 ...

  4. QQ浏览器不支持JS问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. SQL Server -SET QUOTED_IDENTIFIER

    SET QUOTED_IDENTIFIER ON SQL SERVER的联机丛书的解释: “当 SET QUOTED_IDENTIFIER 为 ON 时,标识符可以由双引号分隔,而文字必须由单引号分隔 ...

  6. Intellij Idea 配置database 连接SQL Server 2012

    首先确认通过TCP IP来连接连接SQLServer 2012     确保 Server Authentication选择了SQL Server and Windows Authentication ...

  7. UIAlertController(警告栏) 自学之初体验

    UIAlertController有两种样式  preferredStyle: UIAlertControllerStyleAlert (位于屏幕的中部) UIAlertControllerStyle ...

  8. Java异常基础Exception

    异常指不期而至的各种状况,如:文件找不到.网络连接失败.非法参数等.异常是一个事件,它发生在程序运行期间,干扰了正常的指令流程.Java通 过API中Throwable类的众多子类描述各种不同的异常. ...

  9. 【solr专题之四】关于VelocityResponseWriter

    一.关于Velocity的基本配置 在Solr中,可以以多种方式返回搜索结果,如单纯的文本回复(XML.JSON.CSV等),也可以返回velocity,js等格式.而VelocityResponse ...

  10. ETL概述

    转自:http://blog.csdn.net/leosoft/article/details/4279536 ETL,Extraction-Transformation-Loading的缩写,中文名 ...