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 ...
随机推荐
- Angular2 入门
1. 说明 该文档为Angular2的入门文档,可以根据该文档的内如做出一个“helloworld”类型的Angualr2入门程序,通过该文档可以初步了解Angular2的相关知识以及开发流程,同时搭 ...
- 【转】Android Studio系列教程六--Gradle多渠道打包
原文链接:http://stormzhang.com/devtools/2015/01/15/android-studio-tutorial6/ 由于国内Android市场众多渠道,为了统计每个渠道的 ...
- iOS开源项目、框架资源
总结的 iOS.Mac开源项目.库.知识点:http://www.open-open.com/lib/view/open1442664670352.html
- .NET 委托
委托类型定义 C#编译器处理委托时,先自动产生一个派生自System.MulticastDelegate的密封类.这个类与它的基类System.Delegate一起为委托提供必要的基础设施, ...
- [Android Pro] 常用的android工具类和库
reference to : http://blog.csdn.net/lovexieyuan520/article/details/50614086 这篇博客主要记录我认为比较有用的Android ...
- mvc+webapi 项目架构
首先项目是mvc5+webapi2.0+orm-dapper+ef codefirst+redis+quartz.net+actionmq. 1.项目框架层次结构: 这个mvc项目根据不同的业务和功能 ...
- Mac下Boost环境搭建
Boost,一个功能强大.跨平台.开源而且免费的C++程序库,可以在其官网了解更多:http://www.boost.org,C++标准经过不断的升级完善,现在已经功能越来越吸引人了,Boost开发过 ...
- VR系统的分类
转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 根据用户参与和沉浸感的程度,通常把虚拟现实分为4大类:桌面虚拟现实系统.沉浸式虚拟现实系统.增强虚拟现实 ...
- HttpWatch的时间分析
HttpWatch的时间段捕捉详解 这是一个IE的插件,下载可以点这里.下载后解压如下图所示,一共有4个文件.HttpWatch Professional是单独软件,可以单独使用. 解压后有四个文件 ...
- 【CentOS】正则表达式
1.grep [-cinvABC] 'word' filename -c :打印符合要求的行数 --color:显示颜色 -i :忽略大小写(ignore) -n :在输出符合要求的行的同时连同 ...