您的位置：首页 > Web前端 > JavaScript

js 判断手机横竖屏

2015-08-20 11:49 573 查看

1.首先介绍下 css3得横竖屏判断

/*手机竖屏判断*/

@media all and (orientation: portrait){ }

/*手机横屏判断*/

@media all and (orientation:landscape){ }

在一般情况下，css3判断还是比较准确得。但是在特殊情况下，比如说在页面存在表单的情况，大家看下截图，一目了然（sorry，复现不了了，大家自行判断情况吧）

2.js搞定横竖屏判断

function orient() {

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

$('#wrongLayer').hide();

return false;

}

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

$('#wrongLayer').show();

return false;

}

}

$(window).bind('orientationchange', function(e){

orient();

});

ok，上一下完整版代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

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

<meta name="format-detection" content="telephone=no">

<meta name="apple-mobile-web-app-capable" content="yes">

<title>页面测试</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style type="text/css">

*{;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

body,html{margin: 0px;padding: 0px;height: 100%;width: 100%;font-size: 62.5%}

ul,li{padding: 0px;margin:0px;list-style: none}

a{text-decoration: none}

/*手机横屏样式*/

.wrong-layer{

position: fixed;

display: none;

background: #21313e;

z-index: 99999;

height: 100%;

width: 100%;

top:0px;

}

.abs-mm{

position: absolute;

left: 50%;

top: 50%;

text-align: center;

-webkit-transform:translate(-50%, -50%);

}

.abs-mm .placeBlock-20{

width: 100%;

height: 20px;

display: block;

}

/*验证码页面*/

.didi-dilog{

position: fixed;

background:rgba(0,0,0,.5);

height: 100%;

width: 100%;

z-index: 1;

top: 0px;

left: 0px;

}

.content_tel{

background:#fff;

border-radius:5px;

width: 80%;

position: relative;

padding: 16px 0px 0px 0px;

left: 50%;

top: 50%;

margin-left: -40%;

margin-top: -107px;

height: 214px;

font-size: 1.2rem

}

.content-tips{

margin-top: -102px;

height: 204px;

}

.cont_ul{

width: 80%;

margin: 0px auto;

}

.cont_ul p{

color: #333;

text-align: center;

font-size: 1.2rem

}

.cont_ul li.form{

border: 1px solid #ccc;

height: 40px;

line-height: 40px;

border-radius: 5px;

}

.cont_ul li input{

width: 100%;

font-size: 1.4rem;

font-family: "";

color: #7C7C7C;

padding-left: 10px;

border: 0px;

outline: 0px;

}

::-webkit-input-placeholder{

color: #ccc

}

a.chose_btn {

margin-top: 18px;

background: #ff8a02;

color: #fff;

border-radius: 6px;

font-size: 1.6rem;

display: block;

height: 40px;

line-height: 40px;

display: inline-block;

text-align: center;

width: 100%;

z-index: 100;

font-family: "黑体"

}

.li_phone{

position: relative;

margin-bottom: 10px;

}

</style>

</head>

<body>



<div class="wrong-layer fullLayer" id="wrongLayer">

<div class="abs-mm ta-c">

<img src="http://static.xiaojukeji.com/pinche/images/subwaydog/wrong.png" style="width:74px;height:110px;">

<br>

<div class="placeBlock-20"></div>

<span class="size14" style="color:#fff;font-size:1.4rem">为了更好的体验，请使用竖屏浏览</span>

</div>

</div>

<script type="text/javascript">

var fullLayer = document.querySelector('.fullLayer');

if(window.innerHeight>window.innerWidth){

fullLayer.style.height= window.innerWidth + "px";

}else{

fullLayer.style.height= window.innerHeight + "px";

}

</script>



<div class="content_tel">

<ul class="cont_ul">

<li><p>验证手机号,奖励才能找到你哦</p></li>

<li class="li_phone form">

<input type="tel" placeholder="填写手机号" id="phone" class="phone_i" maxlength="11">

</li>

<li class="form">

<input type="tel" placeholder="输入验证码" id="code" class="valide_i" maxlength="4">

</li>

<li>

<a href="javascript:void(0);" class="chose_btn" id="chose_btn">确定</a>



</li>

</ul>

</div>

<script src="http://1.jiaxuan.sinaapp.com/js/jquery.js"></script>

<script type="text/javascript">

function orient() {

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

$('#wrongLayer').hide();

return false;

}

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

$('#wrongLayer').show();

return false;

}

}

$(window).bind('orientationchange', function(e){

orient();

});

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航