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


Posted in Javascript onMay 25, 2015

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

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="改变到水平方向";
// 改变到水平方向
}
});
Javascript 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
Aug 22 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 #Javascript
js实现鼠标划过给div加透明度的方法
May 25 #Javascript
javascript实现youku的视频代码自适应宽度
May 25 #Javascript
微信WeixinJSBridge API使用实例
May 25 #Javascript
jquery.validate使用时遇到的问题
May 25 #Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 #Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 #Javascript
You might like
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
PHP4之真OO
2006/10/09 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
web.js.字符串与正则表达式操作
2017/05/13 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
解决pycharm双击但是无法打开的情况
2020/10/31 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python的Urllib库的基本使用教程
2015/04/30 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
python实现逻辑回归的示例
2020/10/09 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
2014组织生活会方案
2014/05/19 职场文书
公司内部升职自荐信
2015/03/27 职场文书
飞屋环游记观后感
2015/06/08 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
Python3的进程和线程你了解吗
2022/03/16 Python
Elasticsearch 数据类型及管理
2022/04/19 Python
利用Redis实现点赞功能的示例代码
2022/06/28 Redis