文档章节

HTML5中判断横屏竖屏

放开那个女孩
 放开那个女孩
发布于 2017/07/03 11:52
字数 474
阅读 13
收藏 0

在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。
首先在head中加入如下代码:

1

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

针对上述viewport标签有如下说明
1)、content中的width指的是虚拟窗口的宽度。

2)、user-scalable=no就一定可以保证页面不可以缩放吗?NO,有些浏览器不吃这一套,还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。

3)、initial-scale=1.0 初始缩放比例受user-scalable控制吗?不一定,有些浏览器会将user-scalable理解为用户手动缩放,如果user-scalable=no,initial-scale将无法生效。

4)、手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。

5)、如果页面是经过缩小适应屏幕宽度的,会出现一个问题,当文本框被激活(获取焦点)时,页面会放大至原来尺寸。

一:CSS判断横屏竖屏

写在同一个CSS中

1

2

3

4

5

6

@media screen and (orientation: portrait) {

  /*竖屏 css*/

}

@media screen and (orientation: landscape) {

  /*横屏 css*/

}

分开写在2个CSS中
竖屏

1

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

横屏

1

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

一:JS判断横屏竖屏

01

02

03

04

05

06

07

08

09

10

//判断手机横竖屏状态:

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {

        if (window.orientation === 180 || window.orientation === 0) {

            alert('竖屏状态!');

        }

        if (window.orientation === 90 || window.orientation === -90 ){

            alert('横屏状态!');

        

    }, false);

//移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。

© 著作权归作者所有

放开那个女孩
粉丝 4
博文 112
码字总数 43124
作品 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
关于报表在移动端展现需你需要知道哪些?

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

拾光石艺
2018/10/19
0
0
HTML5如何能够控制移动设备的《竖屏》像素?

《横屏》的像素已经可以确定为980px,但是《竖屏》像素该如何控制,因为横屏能够正好铺满手机屏幕,但是竖屏不好控制可以正好铺满,如何能够正正好好铺满?或者铺过头了也可以

徐文志程序猿
2013/10/05
563
2
关于移动端前端开发和PC端前端开发的一点总结

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

武文海
2014/10/28
10.1K
1
js判断手机浏览器是横屏or竖屏

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

zwjjap
2016/10/13
223
0

没有更多内容

加载失败,请刷新页面

加载更多

02.日志系统:一条SQL更新语句是如何执行的?

我们还是从一个表的一条更新语句说起,我们创建下面一张表: create table T(ID int primary key, c int); 如果要将ID=2这一行c的值加1,SQL可以这么写: update T set c=c+1 where ID=2; 前...

scgaopan
今天
9
0
【五分钟系列】掌握vscode调试技巧

调试前端js 准备一个前端项目 index.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1......

aoping
今天
8
0
PhotoShop 高级应用:USM锐化/S锐化/防抖

、 高反差锐化+混合模式:叠加模式 【将更多的边缘细节添加到图像中】

东方墨天
今天
9
0
Python数据可视化之matplotlib

常用模块导入 import numpy as npimport matplotlibimport matplotlib.mlab as mlabimport matplotlib.pyplot as pltimport matplotlib.font_manager as fmfrom mpl_toolkits.mplot3d i......

松鼠大帝
昨天
7
0
我用Bash编写了一个扫雷游戏

我在编程教学方面不是专家,但当我想更好掌握某一样东西时,会试着找出让自己乐在其中的方法。比方说,当我想在 shell 编程方面更进一步时,我决定用 Bash 编写一个扫雷游戏来加以练习。 我在...

老孟的Linux私房菜
昨天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部