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=& ...
随机推荐
- 转自scutan 常用的Linux编程库
库 头文件 描述libGL.so ...
- VS2015中VB.NET类(dLL)里下载并读取文件
最近要从一个http上下载个文件,差点就直接telnet了,突然发现了这个: My.Computer.Network.DownloadFile("目标文件网址") 但是还得读取它, ...
- leetcode-1006 Construct Binary Tree from Inorder and Postorder Traversal
Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume that ...
- vue路由组件群
import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter) const first = { template: ...
- ubuntu文件目录详细介绍
/bin 二进制可执行命令 /dev 设备文件(硬盘/光驱等) /etc 系统管理和配置文件 /etc/rc.d 启动的配置文件和脚本 /home 用户主目录,下面会有以登录用户名作为文件夹名的各文件 ...
- Android的开机流程
Android的开机流程 1. 系统引导bootloader 1) 源码:bootable/bootloader/* 2) 说明:加电后,CPU将先执行bootloader程序,此处有三种选择 a) ...
- 简洁美观的Java博客系统Tale开源了,让每一个有故事的人更好的表达想法
Tale Tale的英文含义为故事,我相信每个坚持写Blog的人都是有故事的:中文你叫它 塌了 也无所谓 . Tale 使用了轻量级mvc框架 Blade 开发,默认主题使用了漂亮的 pinghsu, ...
- 20155304田宜楠2006-2007-2 《Java程序设计》第一周学习总结
20155304田宜楠2006-2007-2 <Java程序设计>第一周学习总结 教材学习内容总结 - 浏览教材,根据自己的理解每章提出一个问题 第一章 除了书上提到的开发工具还有什么适合 ...
- Synchronize执行过程
Synchronize执行过程及原理 在windows原生应用程序开发中,经常伴随多线程的使用,多线程开发很简单,难点就是在于线程的同步,在Delphi中提供了VC中不具备的一个过程Synchroni ...
- WPF Prism框架下基于MVVM模式的命令、绑定、事件
Prism框架下的自定义路由事件和命令绑定 BaseCode XAML代码: <Button x:Class="IM.UI.CommandEx.PrismCommandEx" ...