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

最新推荐文章于 2023-04-15 14:57:53 发布

一百个包子

最新推荐文章于 2023-04-15 14:57:53 发布

阅读量2k

点赞数

分类专栏： css 文章标签：禁用手机横屏手机横竖屏问题 js判断手机横竖屏 css判断手机横竖屏

本文链接：https://blog.csdn.net/lishangua/article/details/42122091

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

html：

<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元素增加此事件的监听：

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();
});

一百个包子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3完美解决手机横竖屏判断，让用户看邀请函更爽

html：亲，请竖屏观看本屏内容，谢谢^_^css：/* 判断手机横竖屏 */@media screen and (orientation:portrait) { /* css[竖向定义样式] */ #cover1{display: none;width: 100%;height: 100%;backg
复制链接

扫一扫

专栏目录