文档章节

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
博文 116
码字总数 13396
作品 1
朝阳
移动端H5解惑-页面适配(二)

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

sunmaobin
08/05
0
0
关于移动端前端开发和PC端前端开发的一点总结

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

武文海
2014/10/28
0
1
HTML5视频教程之canvas合成海报所遇问题及解决方案

本篇文章扣丁学堂HTML5培训小编大家分享HTML5开发方面的问题:canvas合成海报所遇问题及解决方案,HTML5不论是现在还是今后的发展相信很多人都是很看好的,下面和小编一起来了解一下HTML5开发...

扣丁学堂
08/29
0
0
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

没有更多内容

加载失败,请刷新页面

加载更多

使用xtrabackup完成远程备份

转载收藏,以防丢失 需求 Can I backup remote databases from my local server02-27-2013, 06:17 AMHi, I am using mysqldump so far for taking daily backups of my Production datab......

阿dai
10分钟前
1
0
OSChina 周五乱弹 —— 心情超级好开始乱删库

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 手机党少年们想听歌,请使劲儿戳(这里) 把生命除去上班时间, 都开心不起来。 @真Skr小机灵鬼儿: 你才不孤独呢, 想想你早起, @for。:这...

小小编辑
11分钟前
4
6
为什么你的python版本一团糟?因为少了这个操作

坑人的版本 Python 的版本问题一直是个广被吐槽的黑点。以至于有人调侃说: Python 是世界上最好的两种语言! 在这里我要说明下,对于初学者来说,版本间的语法差异其实并不大。现在刚开始学...

crossin
昨天
2
0
Cannot forward after response has been committed

声名:转载自CSDN 通过toncat启动服务器,可以正常登陆访问,登陆进去选择子系统的时候点击登陆的时候,可是去又回到了登陆界面,如此反复就是不能够进入子系统,查看后台报的错误: java.la...

小橙子的曼曼
昨天
2
0
shell编程(告警系统邮件引擎、运行告警系统)

告警系统邮件引擎 1.如果要使用邮件引擎功能,需要调用mail.py文件,放到/usr/local/sbin/mon/mail/目录下即可,具体内容如下: #!/usr/bin/env python#-*- coding: UTF-8 -*-import os,s...

蛋黄_Yolks
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部