文档章节

HTML5实战与剖析之判断移动端横屏竖屏功能

haopeng
 haopeng
发布于 2016/05/13 19:10
字数 215
阅读 68
收藏 11
  用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,进行执行就可以了。  

 

本文转载自:http://blog.csdn.net/lee_magnum/article/details/17429613

共有 人打赏支持
haopeng
粉丝 18
博文 119
码字总数 14107
作品 1
朝阳
私信 提问
关于报表在移动端展现需你需要知道哪些?

现在,企业或者电商平台的商家、业务方,每天都有大量的人需要在线查看大量的指标,用于监控、分析关键业务数据的发展趋势。而且,这些查看分析数据的诉求,对于随时随地、方便快捷的要求也越...

拾光石艺
2018/10/19
0
0
移动端H5解惑-页面适配(二)

本文原文发表于2016年我的github,但是直到现在为止还有很多童鞋问我相关概念,于是整理下再分享一下。 原文链接:github.com/sunmaobin/s… 一、基础概念 在了解如何做H5页面适配前,大家都...

sunmaobin
2018/08/05
0
0
媒体查询iphone4,5,6以及更高

-------------------------------------------安卓适配 开始------------------------------------------ 关于安卓机的移动端设备适配问题? 安卓机设备众多,在网上也不太容易知道此设备的长...

柴高八斗之父
2017/07/17
0
0
Firefox 9 beta 加入 Lion 和 Android 平板界面

Firefox 9 beta 支持台式机和Android设备。在发布Firefox 8以后,Mozilla很快也发布了Firefox 9 beta。在台式机上,Firefox的界面将更加融入Mac OS X Lion的风格,支持双手指滑动,多屏显示等...

虫虫
2011/11/12
1K
1
关于移动端前端开发和PC端前端开发的一点总结

首先就是操作兼容性和个移动版浏览器的兼容性:传统设备上用户利用鼠标(包括触摸版)和键盘来操作网页,放大图片、拖拽元素、进行页面滚动等等。一些常见的鼠标和键盘事件诸如mouseover、m...

武文海
2014/10/28
0
1

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 白掌柜说了卖货不卖身

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @爱漫爱 :这是一场修行分享羽肿的单曲《Moony》 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :开不开心? 开心呀, 我又不爱睡懒觉…...

小小编辑
今天
8
0
大数据教程(11.7)hadoop2.9.1平台上仓库工具hive1.2.2搭建

上一篇文章介绍了hive2.3.4的搭建,然而这个版本已经不能稳定的支持mapreduce程序。本篇博主将分享hive1.2.2工具搭建全过程。先说明:本节就直接在上一节的hadoop环境中搭建了! 一、下载apa...

em_aaron
今天
3
0
开始看《JSP&Servlet学习笔记》

1:WEB应用简介。其中1.2.1对Web容器的工作流程写得不错 2:编写Servlet。搞清楚了Java的Web目录结构,以及Web.xml的一些配置作用。特别是讲了@WebServlet标签 3:请求与响应。更细致的讲了从...

max佩恩
今天
4
0
mysql分区功能详细介绍,以及实例

一,什么是数据库分区 前段时间写过一篇关于mysql分表的的文章,下面来说一下什么是数据库分区,以mysql为例。mysql数据库中的数据是以文件的形势存在磁盘上的,默认放在/mysql/data下面(可...

吴伟祥
今天
3
0
SQL语句查询

1.1 排序 通过order by语句,可以将查询出的结果进行排序。放置在select语句的最后。 格式: SELECT * FROM 表名 ORDER BY 排序字段ASC|DESC; ASC 升序 (默认) DESC 降序 1.查询所有商品信息,...

stars永恒
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部