js移动端横竖屏检测
方法一:用resize事件来判断,利用屏幕的宽高比,来判断横竖屏 (兼容性较好)
(function () {
var updateOrientation = function () {
var orientation = (window.innerWidth > window.innerHeight)? 'landscape' : 'portrait';
if(orientation === 'landscape'){
//横屏
}
else if(orientation === 'portrait'){
//竖屏
}
}
var init = function () {
updateOrientation();
window.addEventListener('resize',updateOrientation,false);
}
window.addEventListener('DOMContentLoaded',init,false)
})()
方法二:css3媒体查询
@media all and ( orientation: portrait ){
//竖屏
}
@media all and ( orientation: landscape ){
//横屏
}
方法三:orientationChange事件 (我在谷歌测试的,弹出来undefined,这个不建议用,兼容性不好)
window.addEventListener("orientationchange", function() {
alert(window.orientation);
}, false);
终结:需要操作js的用方法一,只需要改改样式的用方法二
js移动端横竖屏检测的更多相关文章
- 【原】js检测移动端横竖屏
摘要:上周做了一个小项目,但是要放到我们的app上,然而需要横竖屏使用不同的样式.横屏一套,竖屏一套.调用了手机APP那里的api,可是他们那里ios和安卓返回的不一样. 各种头疼.于是用了css3的 ...
- Hammer.js移动端触屏框架的使用
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove. ...
- JS判断手机横竖屏
在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientat ...
- js移动端触屏事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
- js 判断手机横竖屏的实现方法(不依赖任何其他库)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JS检测移动端横竖屏
(function () { var supportOrientation = (typeof window.orientation == ...
- JS移动端滑屏事件
来看看在pc上面的几个事件:onmousedown,onmousemove,onmouseup 我相信大家对这几个事件一定不陌生,第一个onmousedown表示鼠标按下,第二个onmousemove ...
- JS禁止横竖屏切换,强制横竖屏显示
js判断屏幕横竖屏: function orient() { //alert('gete'); if (window.orientation == 0 || window.orientation == ...
- 移动端Web开发如何处理横竖屏
<!Doctype html> <html> <head> <meta charset="utf-8"> <meta id=& ...
随机推荐
- JS Proptotyp以及__proto__
一直以来都特别疑惑js原型链的只是,每次看到类似的文章也是迷迷糊糊,今天终于有点小的感悟,记录下来 在JS中一切都是对象,而通过其它的面向对象语言,对象又是类型的实例,所以类型和对象是不同的,那么在j ...
- UI进阶 XML解析适配 引入GDataXML文件时候 'libxml/tree.h'file not found 错误解决办法
在工程的"Build Settings"页中找到"Header Search Path"项,添加"/usr/include/libxml2" ...
- Node.js学习笔记(一)基础介绍
什么是Node.js 官网介绍: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js us ...
- strpos、 strstr、 substr三个函数的对比讲解
mixed strpos ( string $haystack , mixed $needle [, int $offset = 0 ] ) 返回 needle 在 haystack 中首次出现的数字 ...
- #define宏与const的区别
1.#define宏的用法 #define用宏名代替一个字符串,这样便于修改,提高了程序的可移植性.编译器在编译预处理时只对宏做文本替换,而不进行类型检查,所以替换后可能产生一些副作用. 带参数的宏类 ...
- C#Redis 主从复制
一.前戏 下面的列表清楚的解释了Redis Replication的特点和优势. 1). 同一个Master可以同步多个Slaves. 2). Slave同样可以接受其它Slaves的连接 ...
- C#中运算符的使用
通过学习知道了知道了运算符的分类及使用方法 运算符用于执行程序代码运算,会针对一个或一个以上操作数项目来进行运算.例如:2+3,其操作数是2和3,而运算符则是“+”. C#语言把除了控制语句和输入输出 ...
- HTML第一课
<标签名 属性>内容</标签名> <标签/> 静态网页与动态网页的区别:是否从数据库提取数据相对路径跟绝对路径../代表高一级的 牛逼的空格< ...
- ES6-01:常量与变量的声明
首先,我们声明一个变量: //定义一个变量num,并赋值为10: let num = 10; //进行打印 console.log(num); let与var有所不同: 语法特点1:let变量只能在当 ...
- 小白能学好UI设计吗
许多童鞋在接触UI培训前会有很多疑问,我是干快递的,我能学好UI设计吗,UI培训要学些什么,电脑操作我好像什么都不会,除了打游戏,我适合学UI设计吗--有这些想法呢是人之常情,但是我们反过来想一想,有 ...