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

css3完美解决手机横竖屏判断，让用户看邀请函更爽

2014-12-24 11:55 363 查看

html：

<div id="cover1"></div>

<p id="cover1w">亲，请竖屏观看本屏内容，谢谢^_^</p>

css：

/* 判断手机横竖屏 */

@media screen and (orientation:portrait) {

/* css[竖向定义样式] */

#cover1{display: none;width: 100%;height: 100%;background-color: #000;opacity:1;position: absolute;z-index: 9999;top: 0px;left: 0px;}

#cover1w{display: none;width: 70%;height: 40px;position: absolute;z-index: 10000;top: 50%;left: 15%;margin-top: -20px;font-size: 18px;color: #fff;font-weight: bolder;text-align: center;}

}

@media screen and (orientation:landscape) {

/* css[横向定义样式] */

#cover1{display: block;width: 100%;height: 100%;background-color: #000;opacity:1;position: absolute;z-index: 9999;top: 0px;left: 0px;}

#cover1w{display: block;width: 70%;height: 40px;position: absolute;z-index: 10000;top: 50%;left: 15%;margin-top: -20px;font-size: 18px;color: #fff;font-weight: bolder;text-align: center;}

}

/* PC客户端或大屏幕设备: 1280px 至更大 */

@media only screen and (min-width: 1280px) {

#cover1{display: none;width: 100%;height: 100%;background-color: #000;opacity:1;position: absolute;z-index: 9999;top: 0px;left: 0px;}

#cover1w{display: none;width: 70%;height: 40px;position: absolute;z-index: 10000;top: 50%;left: 15%;margin-top: -20px;font-size: 18px;color: #fff;font-weight: bolder;text-align: center;}

}

其他参考解决方案：

当用户旋转屏幕的时候，会进入到你的监听方法中，然后通过window.orientation来获取当前屏幕的状态：

0 - 竖屏

90 - 逆时针旋转横屏

-90 - 顺时针旋转横屏

180 - 竖屏，上下颠倒

如果你不希望用户使用横屏方式查看你的网页，你可以在设备旋转时间监听里面对body使用CSS3里面的transition中的旋转来保持页面竖向。

移动设备上的页面，当屏幕旋转的时候会有一个orientationchange事件。你可以给body元素增加此事件的监听：

<body onorientationchange="updateOrientation();">

js解决方案

今天这里我们分享一个jQuery的代码，能够有效帮助大家判断横屏或者竖屏。注意这里调用了jQuery的方法，所以你需要引用jQuery类库。function orient() {

alert('gete');

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

$("body").attr("class", "portrait");

orientation = 'portrait';

return false;

}

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

$("body").attr("class", "landscape");

orientation = 'landscape';

return false;

}

}

$(function(){

orient();

});

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

orient();

});

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

标签：

相关文章推荐

新的分享

章节导航