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 ...
随机推荐
- div自定义下拉框
因为原生的下拉框不能修改其属性,很难美化下拉框. 所以自己用div简单自定义了一下下拉框,想美化直接修改css即可 <!DOCTYPE html> <html lang=" ...
- Fiddler
Fiddler教程: 原文:http://kb.cnblogs.com/page/130367/
- hdu 4717(三分求极值)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4717 思路:三分时间求极小值. #include <iostream> #include ...
- jq点击显示,再点击隐藏
每次都会遇到的问题: <script> $("button").click(function(){ if($(".div").css("d ...
- 比管理员(administrator)更高权限的TrustedInstaller
http://www.gezila.com/tutorials/9664.html 什么是TrustedInstaller管理权限 ?好多朋友都在使用Windows7系统.在使用过程中,有些朋友在删除 ...
- win10 系统怎么获取最高管理员权限删除文件
http://www.xitongcity.com/jiaocheng/win8_content_3473.html 很多win8.1系统用户在对磁盘文件进行清理时,经常会遇到“文件夹访问被拒绝,您需 ...
- containing block
1(position:static和relative) 它的包含块由它最近的块级.单元格(table cell)或者行内块(inline-block)祖先元素创建. 2.position:fixed ...
- HDU5288 OO’s Sequence
Problem Description OO has got a array A of size n ,defined a function f(l,r) represent the number o ...
- python中列表,元组,字符串互相转换
列表,元组和字符串python中有三个内建函数:,他们之间的互相转换使用三个函数,str(),tuple()和list(),具体示例如下所示 >>> s = "xxxxx& ...
- hg 的使用简介
克隆仓库 仓库是一个目录,它包含所有我们希望保留历史的源代码和这些源代码的历史记录. 克隆就是生产一个仓库的副本,这样可以有一个本地私有的仓库来工作. hg clone http://远程仓库地址:端 ...