文档章节

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

haopeng
 haopeng
发布于 2016/05/13 19:10
字数 215
阅读 68
收藏 11
点赞 2
评论 0
  用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
博文 115
码字总数 13024
作品 1
朝阳
关于移动端前端开发和PC端前端开发的一点总结

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

武文海
2014/10/28
0
1
html5 上传本地图片处理各种问题

原文还是在简书上: html5 上传本地图片处理各种问题 这是最近给公司写一个项目,项目要求大概是这样子: 1.上传手机本地图片,然后裁剪(后加的需求) 2.能够旋转图片,用于裁剪(后面加的需...

乖小鬼YQ
2017/11/29
0
0
vue服务器端渲染(SSR)实战

什么是服务端渲染(SSR)? SSR(Server-Side Rendering),在SPA(Single-Page Application)出现之前,网页就是在服务端渲染的。服务器接收到客户端请求后,将数据和模板拼接成完整的页面响应到客...

小铭星
07/12
0
0
Amaze UI让HTML5 Web应用接近原生体验

近日,第四届HTML5峰会在北京国际会议中心拉开序幕,云适配携其“HTML5跨屏前端框架Amaze UI”高调亮相,并在大会上了做了《组件化-Web前端开发的未来趋势》的重要演讲。 组件化是Web开发的未...

妹子有爱
2015/08/10
0
0
js判断手机浏览器是横屏or竖屏

移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。 从而根据实际需求而执行相应的程序。通过添加监听事件onorientationchange,进行...

zwjjap
2016/10/13
23
0
基于HT for Web的Web SCADA工控移动应用

在电力、油田燃气、供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex、Silverlight甚至Applet这样的重客户端方案,在HTML5流行前VML和...

xhload3d
2015/03/18
0
2
WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/23
0
0
移动端前端开发与PC端比有哪些不同?

1,移动端在布局跟js效果方面,与PC端有什么不同 先说布局方面: PC端咱们最常用的就是固定宽度980px(也有960,1000,1200),然后水平居中 width:980px;margin:0 auto; 但移动端就不能这么用...

名字已被取
2016/04/12
208
0
响应式Web设计(二):响应式Web设计的概念

  首先感谢大家对第一篇背景介绍一文的支持,今天将对响应式Web设计的概念进行一个大概的介绍,当然这一篇也不是什么干货,只是作为一个主题来说,概念的介绍必不可少,下一篇就应该有点干...

幸福2胖纸
2013/05/04
0
10
起点海外版 Hybrid App-内嵌页优化实践

本文作者:刘文涛 原创声明:本文为阅文前端团队 YFE 成员出品,请尊重原创,转载请联系公众号 (id: yuewen_YFE) 获取授权,并注明作者、出处和链接。 今年年初我司开启了起点品牌的海外之旅...

阅文集团前端团队
06/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Nginx配置error_page 404 500等自定义的错误页面

Nginx 做web server时, 开发中发现有时候的网站代码有错误,我们需要跳转到一个指定内容的错误页面: 1. 在nginx.conf配置文件上加上一句: fastcgi_intercept_errors on; 2. 服务中加上: er...

MichaelShu
5分钟前
0
0
社区系统:如何搭建旅游攻略社区

随着国内经济的快速发展,人民经济收入和生活水平的提高,越来越多的人们在节假日会选择旅行,旅游行业蓬勃发展,并呈逐年上升趋势,同时,大多数游客尤其是自由行游客会在旅行前访问旅行攻略...

ThinkSNS账号
6分钟前
0
0
微服务架构下的监控系统设计(一)——指标数据的采集展示

前言 微服务是一种架构风格,一个大型复杂软件应用通常由多个微服务组成。系统中的各个微服务可被独立部署,各个微服务之间是松耦合的。每个微服务仅关注于完成一件任务并很好地完成该任务。...

UCloudTech
11分钟前
0
0
极客时间《趣谈网络协议》之开篇词学习笔记

出于个人兴趣,本人在极客时间购买了网易研究院云计算技术部的首席架构师刘超老师关于计算机网络的专栏之《趣谈网络协议》,由于知识版权原因,不能直接分享刘超老师的原文,所以,我会在每次...

aibinxiao
13分钟前
0
0
Activiti - 新一代的开源 BPM 引擎

Activiti 背景简介、服务和功能介绍 董 娜, 狄 浩, 和 张 晓篱 2012 年 7 月 23 日发布 背景介绍 Activiti 其核心是 BPMN 2.0 的流程引擎。BPMN 是目前被各 BPM 厂商广泛接受的 BPM 标准,全...

孟飞阳
19分钟前
0
0
最有效的方式来适配

最有效的方式来进行屏幕适配 在上代码之前先把屏幕相关的几个概念搞清楚:Density、DensityDpi、ScaleDensity。这里我们不过多讲解这些概念知识。 1.0 获取设计图的屏幕尺寸:这里我以360dp...

android-key
21分钟前
0
0
微信授权代码翻译样本

var a,b,c,d = ngx.call(1,2,3)var e = [];var f ;var g = function () {}var h = 1;var c = "abcdefg" + "222";var d = "asdasdasd" + a;var a = ngx >>> log();//......

钟元OSS
23分钟前
0
0
5、二维码生成工具类

一、maven引入依赖jar包 <dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.1.0</version></dependency><dependency><groupId>com.......

丑陋的皮囊
23分钟前
0
0
正则表达式

以前用正则表达式很少,大部分情况下matches一下就好了,这次遇到的情况比较特殊,因为对截取出来的数据比较敏感(日期),所以就重新熟悉了一下,感觉有必要记录一下: /** * 从字符串中...

lost_keke
25分钟前
2
0
Java语言学习(十一):枚举类型和泛型

Java中一个重要的类型:枚举,它可以用来表示一组取值范围固定的变量,使用 enum 关键字定义枚举类型,其中元素不能重复,通常大写表示。利用Java的反射机制,可以在运行时分析类,如查看枚举...

海岸线的曙光
28分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部