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 ...
随机推荐
- jsp实验二
1.编写一个简单的留言薄,写入留言提交后,显示留言内容 2.编写一个实现页面计数的计数器.思考,如果要求当刷新页面时,不增加计数. 3.编写一个简易购物车,实现向购物车添加商品.思考,如果增加清空购物 ...
- HDU 5102 The K-th Distance(模拟)
题意:输入一棵树,输出前k小的点对最短距离dis(i,j)的和. 模拟,官方题解说得很清楚了.不重复了. http://bestcoder.hdu.edu.cn/ 需要注意的是,复杂度要O(n+k), ...
- Servlet 生命周期与web容器的关系
servlet生命周期由web容器(如tomcat)管理,初始化一次,直到web容器关闭才会被销毁.1.servlet是单例多线程,每个请求过来容器都会启用一个新线程 2.servlet在容器中保持单 ...
- 【Python】 属性的 get 与 set 方法
在C#里面,属性的get 与 set 非常简单方便. public class bird { public int age { get;set; } public bool isadult { get ...
- Centos7 基本shell命令
删除文件 # rm /usr/local/test.txt# rm -f /usr/local/test.txt //强制删除文件,不弹出提示 移动文件或文件夹 # mv webdata /bin/u ...
- python下编译py成pyc和pyo
python下编译py成pyc和pyo 其实很简单, 用 python -m py_compile file.py python -m py_compile /root/src/{file1,f ...
- js的回调函数 一些例子
这边用bootstrap 3.0的 上传控件做例子 下面是上传控件的一段完整的 js 操作 代码. <!-- 上传缩略图控件配置 --><script> // 定义这四个全局 ...
- WPF 点击Calendar后,需要点击两次按钮
主面板上有一个Calendar控件,点击选择了日期后,如果点击确认按钮,需要点击两次.这个问题的解决方法如下: private void calendar1_PreviewMouseUp(ob ...
- JavaScript创建对象
最佳方式 原型模式与构造模式组合使用 先上代码: function Person(name,age,salary){ this.name = name; this.age = age; this.sa ...
- 【BZOJ1087】 [SCOI2005]互不侵犯King 状压DP
经典状压DP. f[i][j][k]=sum(f[i-1][j-cnt[k]][k]); cnt[i]放置情况为i时的国王数量 前I行放置情况为k时国王数量为J #include <iostre ...