JS检测移动端横竖屏
(function () {
var supportOrientation = (typeof window.orientation === 'number' &&
typeof window.onorientationchange === 'object');
var init = function () {
var htmlNode = document.body.parentNode,
orientation;
var updateOrientation = function () {
if (supportOrientation) {
orientation = window.orientation;
switch (orientation) {
case 90:
case -90:
orientation = 'landscape'; //这里是横屏
//alert("横屏");
break;
default:
orientation = 'portrait';//这里是竖屏
//alert("竖屏");
break;
}
} else {
orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
}
htmlNode.setAttribute('class', orientation);
};
if (supportOrientation) {
// 每次旋转,调用这个事件。
window.addEventListener('orientationchange', updateOrientation, false);
} else {
//监听resize事件
window.addEventListener('resize', updateOrientation, false);
}
updateOrientation();
};
window.addEventListener('DOMContentLoaded', init, false);
})();
来源:http://www.jb51.net/article/85438.htm
JS检测移动端横竖屏的更多相关文章
- 【原】js检测移动端横竖屏
摘要:上周做了一个小项目,但是要放到我们的app上,然而需要横竖屏使用不同的样式.横屏一套,竖屏一套.调用了手机APP那里的api,可是他们那里ios和安卓返回的不一样. 各种头疼.于是用了css3的 ...
- 用js实现web端录屏
用js实现web端录屏 原创2021-11-14 09:30·无意义的路过 随着互联网技术飞速发展,网页录屏技术已趋于成熟.例如可将录屏技术运用到在线考试中,实现远程监考.屏幕共享以及录屏等:而在我们 ...
- js移动端横竖屏检测
方法一:用resize事件来判断,利用屏幕的宽高比,来判断横竖屏 (兼容性较好) (function () { var updateOrientation = function () { var or ...
- js判断手机的横竖屏调整样式
在移动端,我们经常遇到横竖屏的问题,所以我们改如何判断或针对横竖屏来写代码呢.首先需要在head中加入如下代码: <meta name="viewport" content= ...
- 移动端Web开发如何处理横竖屏
<!Doctype html> <html> <head> <meta charset="utf-8"> <meta id=& ...
- JS案例之5——移动端触屏滑动
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- JS禁止横竖屏切换,强制横竖屏显示
js判断屏幕横竖屏: function orient() { //alert('gete'); if (window.orientation == 0 || window.orientation == ...
- 移动端触屏滑动,JS事件
先了解下 移动端的触屏滑动 毕竟这玩意其实和PC端还是有一定的区别的 hh 整理了下网上的资料放一放 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等 ...
- JS -判断、监听屏幕横竖屏切换事件
通过监听window.orientationchange事件,当横竖屏切换事件时触发 <!doctype html> <html> <head> <title ...
随机推荐
- js指定分隔符连接数组元素join()
指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. 语法: arrayObject.join(分隔符) 参数说明: 注意:返回 ...
- yii2.0 框架邮件的发送
第一步: 在main-local.php中的components中配置mailer: $config = [ 'components' => [ 'mailer' => [ 'class' ...
- .NET 事件
事件概述 在发生其他类或对象关注的事情时,类或对象可通过事件通知它们.发 ...
- sql 列转行
原表:转过的表: 代码: ) set @sql = 'select AssetRecordId ' select @sql = @sql + ' , max(case ExtendName when ...
- Spring实例化Bean的三种方式及Bean的类型
1.使用类构造器实例化 [默认的类构造器] <bean id=“orderService" class="cn.itcast.OrderServiceBean"/ ...
- 【转载】scribe、chukwa、kafka、flume日志系统对比
原文地址:http://www.ttlsa.com/log-system/scribe-chukwa-kafka-flume-log-system-contrast/ 1. 背景介绍许多公司的平台每天 ...
- HTML5中的对象的拖拽
拖拽: draggable="true"页面上就能实现拖拽事件: ondragstart 拖拽开始事件 ondrag 拖拽中 ondragend 拖拽结束事件 投放区事件: ond ...
- 2015ACM/ICPC亚洲区长春站
5532 Almost Sorted Array 题目大意:给你一个序列,如果它拿掉其中一个数后,可以是该序列成为非递减或非递增序列,则输出YES. 有两种思路,第一种代码比较简单,是LIS,复杂度n ...
- iOS中类别的使用
类别的三大作用1.给现有的类增加方法,可以增加 对象方法,也可以增加静态方法. 如果增加的方法是此类本来就有的方法,那么,此方法有可能会把原方法覆盖,也有可能不会覆盖. 类别只能增加现有类的方法,不能 ...
- CodeForces460B. Little Dima and Equation
B. Little Dima and Equation time limit per test 1 second memory limit per test 256 megabytes input s ...