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=& ...
随机推荐
- block之---内存管理
首先简单说下MRC和ARC MRC: 手动管理内存,需要自己去释放内存, 如果对象的引用计数器为0时对象就会被释放. 属性修饰策略:assign, retain, copy ARC: ARC是编译器特 ...
- 关于JavaScript中的编码和解码函数
js对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 1 ...
- Cassandra 学习笔记 - 1 - 关于Cassandra
摘要 - Cassandra 的历史 Cassandra能做什么 Apache Cassandra最早是Facebook为了改进他们的Inbox搜索功能,由Avanash Lakshman和Prash ...
- Java包装类缓存
1.基本概念 在jdk1.5及之后的版本中,Java在5大包装类中(Byte,Charactor,Short,Integer,Long)增加了相应的私有静态成员内部类为相应包装类对象提供缓存机制,In ...
- Docker入门01——Image
1.获取镜像 2.列出镜像 3.创建镜像 3.1 修改已有镜像 3.2 使用Dockerfile创建镜像 创建Dickerfile文件 使用build来创建镜像 使用新创建的镜像来启动容器 4.移除镜 ...
- 【JSON学习之道】js操作JSON
JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON ...
- [C#7] 1.Tuples(元组)
1. 老版本代码 class Program { static void Main(string[] args) { var fullName = GetFullName(); Console.Wri ...
- Java Trie树
Tire树,又叫字典树,主要是用来查找单词,词频统计的. 老规矩,直接上代码. package tireTree; public class TireTree { TireNode root; pub ...
- 008 Java集合浅析3
在前面的几节里,本教程从整体架构上去把握了JDK中的集合框架,并简单分析了其中Collection组的顶级接口,知道Collection接口的常见直接子接口有List.Set和Queue,并就这三个子 ...
- 用Use Case获取需求的方法是否有什么缺陷,还有什么地方需要改进?
一.用例解释 用例是一种在开发新系统或者软件改造时捕获潜在需求的技术.每个用例提供了一个或多个场景,该场景揭示了系统是如何同最终用户或其它系统交互的,从而获得一个明确的业务目标.用例要避免技术术语,取 ...