HTML5实战与剖析之判断移动端横屏竖屏功能
来源:互联网 发布:pokemon go 辅助软件 编辑:程序博客网 时间:2024/06/05 06:16
在手机端经常游走的我们很多时候都会对横屏和竖屏的概念比较熟悉,大家都经常头疼怎么才能判断这横屏和竖屏的状态呢,今儿梦龙就为大家分享分享。
用CSS判断横屏竖屏问题。CSS代码如下
1、 @media (orientation: portrait) { } 横屏 @media (orientation: landscape) { }竖屏 2、 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">横屏 <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">竖屏
用JavaScript判断横屏竖屏问题。JavaScript代码如下
//判断手机横竖屏状态:function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert("竖屏状态!") }if(window.orientation==90||window.orientation==-90){ alert("横屏状态!") } }window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);//移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。从而根据实际需求而执行相应的程序。通过添加监听事件onorientationchange,进行执行就可以了。
以上便是HTML5实战与剖析之判断移动端横屏竖屏功能的介绍,大家以后再遇到这样的需求的时候还是会比较方便的拿来就能用了。
3 0
- HTML5实战与剖析之判断移动端横屏竖屏功能
- HTML5实战与剖析之判断移动端横屏竖屏功能
- HTML5实战与剖析之判断移动端横屏竖屏功能
- HTML5实战与剖析之移动端IOS系统收缩地址导航栏功能
- HTML5实战与剖析之一行一行看移动端结构
- HTML5判断移动端横屏竖屏功能
- HTML5实战与剖析之延迟脚本
- HTML5实战与剖析之classList属性
- HTML5实战与剖析之剪贴板事件
- HTML5实战与剖析之WebSockets简介
- HTML5实战与剖析之WebSocket协议
- HTML5实战与剖析之离线应用
- HTML5实战与剖析之使用HTML5 WebSocket API
- HTML5实战与剖析之CSS选择器——querySelector()
- HTML5实战与剖析之CSS选择器——querySelectorAll()
- HTML5实战与剖析之焦点管理(activeElement和hasFocus)
- HTML5实战与剖析之字符集属性(charset和defaultCharset)
- HTML5实战与剖析之自定义数据属性(dataset)
- Cocos2d-x教程 CocoStudio篇 (2) UIButton控件
- 基于visual Studio2013解决面试题之0801对称字符串
- 第二十四天【java虐我千百遍,我待java如初恋】
- Leetcode: Remove Element
- 这就是爱
- HTML5实战与剖析之判断移动端横屏竖屏功能
- 给用户只能操作某一数据库权限
- MIPS 的寄存器
- 高性能 JavaScript 编程 读书笔记
- 移植于电脑圈圈的fsmc_nand代码
- [原][译][转]Floyd算法(待续)
- 基于visual Studio2013解决面试题之0802数字最多元素
- STM32 USB NAND Flash模拟U盘无法格式化问题的解决
- mondrian java.sql.SQLException: No suitable driver found for jdbc:mysql://localhost:3306/foodmart