JS和css实现检测移动设备方向的变化并判断横竖屏幕
2016-05-30 14:37
441 查看
这篇文章主要介绍了JS和css实现检测移动设备方向的变化并判断横竖屏幕,本文分别给出实现代码,需要的朋友可以参考下
方法一:用触发手机的横屏和竖屏之间的切换的事件 [自测可用, chrome , 手机360浏览器, 微信浏览器 其他未测试过]
复制代码代码如下:
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="改变到水平方向";
// 改变到水平方向
}
});
方法一:用触发手机的横屏和竖屏之间的切换的事件 [自测可用, chrome , 手机360浏览器, 微信浏览器 其他未测试过]
复制代码代码如下:
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="改变到水平方向";
// 改变到水平方向
}
});
相关文章推荐
- css3:flexbox
- RadioButton去掉默认样式小圆点
- table消除 td 之间的间距
- Emmet:HTML/CSS代码快速编写神器
- 专为IE8做css hack(IE8 hack only)
- css 实现一个带尖角的正方形
- 结合CSS3的新特性来总结垂直居中的实现方法
- CSS 折角效果
- CSS 用display:inline-block代替float: left排版注意事项
- 初步学习 ionic css 布局
- CSS清除浮动的方法详解
- iTextSharp的使用,把DIV导出为PDF,样式不是很灵活
- CSS浮动所差生的内容溢出问题及清除浮动的方法小结
- CSS3实现头像旋转功能
- 关于before和after以及content的用法
- css:蓝环章鱼
- CSS浏览器兼容性问题,2
- canvas基础学习(二)-填充样式(线性渐变和径向渐变)
- 链接 <a> 的CSS伪类不起作用
- css