横竖屏幕提示

横竖屏幕提示

页面不需要强制横/竖屏时，可根据实际需求，在屏幕旋转时候给予提示：

HTML:

<!--提示用户竖屏浏览-->
<div id="orientLayer" class="orient-layer">
  <p class="orient-layer-tip">为了更好的体验，请使用竖/横屏浏览</p>
</div>

CSS:

.orient-layer {
    display: table;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    font-size: 18px;
    text-align: center;
    color: #fff;
    z-index: 9997;
    background: #000;
}

.orient-layer-tip {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

p:before {
    display: block;
    content: "";
    width: 80px;
    height: 130px;
    margin: 0 auto 5%;
    background-image: url(data:image/png) no-repeat center/contain;
    transform: rotate(90deg);
    animation: rotation infinite 1.5s ease-in-out;
}

@keyframes rotation {
    10%, 100%, 90% {
        transform: rotate(90deg);
    }

    50%, 60% {
        transform: rotate(0deg);
    }
}

方法一：样式方式实现-media

• 通过@media中orientation来控制横竖屏提示的显示和隐藏

/*提示用户竖屏浏览-----竖屏时提示隐藏*/
@media screen and (orientation: portrait) {
  .orient-layer {
    display: none;
  }
}

/*提示用户横屏浏览-----横屏时提示隐藏*/
@media screen and (orientation: landscape) {
  .orient-layer {
    display: none;
  }
}

• 延伸
  • media: https://blog.csdn.net/qq_38882327/article/details/90264834

/* 竖屏 */  
@media screen and (orientation: portrait) and (max-width: 720px) { 对应样式 }  
  
/* 横屏 */  
@media screen and (orientation: landscape) { 对应样式 } 

方法二：js判断

• 通过js判断来控制横竖屏提示的显示和隐藏

  // 横竖屏提示
var isOrientation=function () {
    function orientLayerTip(){
        if (window.orientation === 180 || window.orientation === 0) {//竖屏
            document.querySelector("#orientLayer").style.display = "none";
        }
        if (window.orientation === 90 || window.orientation === -90 ){//横屏
            document.querySelector("#orientLayer").style.display = "table";
        }
    }
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", orientLayerTip, false);
}
isOrientation();

兼容

<!-- UC默认竖屏 ，UC强制全屏 -->
<meta name="full-screen" content="yes"/>
<meta name="browsermode" content="application"/>
<!-- QQ强制竖屏 QQ强制全屏 -->
<meta name="x5-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="x5-page-mode" content="app"/>