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=& ...
随机推荐
- react构建淘票票webapp,及react与vue的简单比较。
前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...
- java.math.BigDecimal()的用法
Java中简单的浮点数类型float和double是不能进行运算的,不光Java,很多语言都是这样. 我们运行下面程序你将会看到 public class TestMathDecimal { publ ...
- JavaScript 深浅拷贝
JavaScript有五种基本数据类型(Undefined, null, Boolean, String, Number),还有一种复杂的数据类型,就是对象. Undefined 其实是已声明但没有赋 ...
- 前端开发面试题总结之——JAVASCRIPT(一)
___________________________________________________________________________________ 相关知识点 数据类型.运算.对象 ...
- 3D Touch开发
一.3d Touch 官方文档介绍 1.A user can now press your Home screen icon to immediately access functionality p ...
- repeater绑定泛型list<string>
菜鸟D重出江湖,依然是菜鸟,囧!言归正传—— 工作中遇到一个repeater绑定的问题,数据源是一个list<string> 集合,然后在界面上使用<%#Eval()%>绑定. ...
- Pin学习笔记--安装及一些基本知识
具体请见用户手册Pin 3.2 User Guide https://software.intel.com/sites/landingpage/pintool/docs/81205/Pin/html/ ...
- 粗谈shell脚本风格
注意:此风格并非官方版本,为个人在编写和维护脚本程序时总结出来的民间版本.0. 开头:除去开头的#!/bin/bash,最前面的就是脚本描述注释了,视个人喜好而定,例如: ############## ...
- where T:class的含义( where约束)
public void Request<T>(List<T> EntityList) where T : class { } 这是参数类型约束,指定T必须是Class类型. ...
- 每天一个linux命令(36)--vmstat命令
vmstat 是 Virtual Memory Statistics(虚拟内存统计)的缩写,可对操作系统的虚拟内存.进程.CPU活动进行监控.他是对系统的整体情况进行统计,不足之处是无法对某个进程进行 ...