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

2024-06-01 11:12:36

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="改变到水平方向";

// 改变到水平方向

}

});

转载于:https://www.cnblogs.com/czzblog/p/3678489.html

js／css 检测移动设备方向的变化判断横竖屏幕相关推荐

移动端中如何检测设备方向的变化？
除非你的应用程序限定了只在移动设备直立状态或水平状态下使用,一般情况下,你需要调整一些设定.即便你设计的布局流畅时尚,你可能需要改变某些编程代码.通常有以下一些小的策略用于检测移动设备方向的改变. o ...
小程序—这款工具把加速计、陀螺仪、设备方向的调试痛点解决了
之前在一篇博文中捎带介绍过这款工具,反响很好,还收到了两位用户的打赏,但受那篇博文的影响,并没有被广大小程序开发者所熟知,故写一篇专门的,希望能有更多用户不再被加速计.陀螺仪.设备方向的调试难题再刺痛 ...
使用Phaser和HTML5特性检测移动设备旋转重力方向
HTML5中包含一个帮助检测device orientation的特性,使用这个特性可以在移动设备浏览器中判断用户设备的旋转重力方向. 基本知识:Alpha, Beta, Gamma角度旋转当用户旋 ...
前端(js/css/html)那些小的知识点，持续更新......
前端(js/css/html)那些小的知识点,持续更新...... 1.行内元素与块级元素有哪些及区别? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示.通过样式控制, ...
前端面试题整理（vue/js/css）
什么是盒子模型把所有的网页元素都看成一个盒子,它具有content,padding,border,margin 四个属性,这就是盒子模型盒子模型有两种形式:标准盒子模型,怪异盒子模型标准模式,总 ...
2021年质量员-设备方向-通用基础(质量员)考试总结及质量员-设备方向-通用基础(质量员)模拟考试题库
题库来源:安全生产模拟考试一点通公众号小程序安全生产模拟考试一点通:施工员-装饰方向-岗位技能(施工员)考试报名考前必练!安全生产模拟考试一点通每个月更新施工员-装饰方向-岗位技能(施工员)找解析题 ...
【无标题】2022年施工员-设备方向-通用基础(施工员)考试模拟100题及模拟考试
题库来源:安全生产模拟考试一点通公众号小程序 2022施工员-设备方向-通用基础(施工员)考试题库是施工员-设备方向-通用基础(施工员)考试真题新版习题库!2022年施工员-设备方向-通用基础(施工员 ...
Device Orientation——设备方向
This example shows how to track changes in device orientation. 这个例子用来展示如何去追踪设备方向的改变. 代码: <!DOCTYP ...
html+js+css 调用jquery 工人信息管理功能（增删改查）前端实现，以及调用实现鼠标拖尾粒子效果的js库
html + js + css 调用jquery以及underscore.min.js(配合代码实现鼠标粒子效果)实现全前端信息管理基本功能(增删改查) 先附上我运行的一段视频,手机打开清晰一点或者直 ...

最新文章

热门文章