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 自定义事件初探
Aug 21 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 18 Javascript
javascript之Object.assign()的痛点分析
Mar 03 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
用PHP调用Oracle存储过程
2006/10/09 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
jQuery select的操作实现代码
2009/05/06 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
解读vue生成的文件目录结构及说明
2017/11/27 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Python django使用多进程连接mysql错误的解决方法
2018/10/08 Python
python中p-value的实现方式
2019/12/16 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
毕业生个人投资创业计划书
2014/01/04 职场文书
小学数学教学反思
2014/02/02 职场文书
青蓝工程实施方案
2014/03/27 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
基层党支部承诺书
2015/04/30 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL