HTML5中判断横屏竖屏
来源:互联网 发布:js如何给span赋值 编辑:程序博客网 时间:2024/06/06 00:54
在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。
首先在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这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。
阅读全文
0 0
- HTML5中判断横屏竖屏
- HTML5中判断横屏竖屏
- HTML5中判断横屏竖屏 和 长按事件
- HTML5中判断用户是否正在浏览页面的方法
- HTML5如何判断文件大小
- js 判断是不否支持HTML5
- 判断浏览器是否支持html5
- html5判断浏览器是否在线
- HTML5判断移动端横屏竖屏功能
- Html5判断app是否安装
- JS判断浏览器是否支持HTML5
- js 判断浏览器是否支持html5
- HTML5中标签input标签number判断
- js判断浏览器是否支持HTML5
- jquery判断浏览器是否支持html5视频
- 关于 !+'\v1' && !'1'[0] 判断html5
- <html5+css3+js>判断和循环
- html5页面简单判断当前有无网络
- CNN:weight decay,momentum,batch normalization
- PostgreSQL\HybridDB for PG 毫秒级多维数据透视 案例分享
- EventBus使用
- android小技巧
- C++ Primer 第6章 函数 学习笔记
- HTML5中判断横屏竖屏
- 【jQuery】jQuery实现checkbox的全选/反选逻辑
- 三级联动
- 部署图的基本概念
- Nova虚拟机启动
- Android的消息机制之ThreadLocal的工作原理
- 2017.06.28 Caffe DeepLearning
- 混合式开发App步骤详解
- Ajax实现跨域访问JSON