大家都知道,我们在做移动端的网页时,设计及实现时,都会以竖屏或者横屏中的一种方式进行设计与实现,所以,为了使用户拥有更佳的体验,我们最好就是给网页加一个横屏或者竖屏提示。这里我们以横屏提示为例进行解析。
首先,先做出横屏提示页面
html:
<div id="orientLayer" class="mod-orient-layer" style="display: none;">
<div class="mod-orient-layer__content">
<i class="icon mod-orient-layer__icon-orient"></i>
<div class="mod-orient-layer__desc">请竖屏浏览此页面</div>
</div>
</div>
css:
<style type="text/css">
/* 样式放在结尾,防止 base64 图片造成拥塞 */
@keyframes rotation {
10% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg)
}
50% {
transform: rotate(0);
-webkit-transform: rotate(0)
}
60% {
transform: rotate(0);
-webkit-transform: rotate(0)
}
90% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg)
}
100% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg)
}
}
@-webkit-keyframes rotation {
10% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg)
}
50% {
transform: rotate(0);
-webkit-transform: rotate(0)
}
60% {
transform: rotate(0);
-webkit-transform: rotate(0)
}
90% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg)
}
100% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg)
}
}
.mod-orient-layer {
display: none;
position: fixed;
height: 100%;
width: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #e0600b;
z-index: 9
}
.mod-orient-layer__content {
position: absolute;
width: 100%;
top: 45%;
margin-top: -75px;
text-align: center;
padding-top: 20px;
}
.mod-orient-layer__icon-orient {
display: inline-block;
width: 67px;
height: 109px;
background-image: url(data:image/png;);
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-webkit-animation: rotation infinite 1.5s ease-in-out;
animation: rotation infinite 1.5s ease-in-out;
-webkit-background-size: 67px;
background-size: 67px
}
.mod-orient-layer__desc {
margin-top: 20px;
font-size: 15px;
color: #fff
}
</style>
进入页面时的初始化代码,放在head中;
<!--手机横屏提示-->
<script>
//判断手机横竖屏状态:
function hengshuping(){
if(window.orientation==0||window.orientation==-360){
window.location.reload();//页面刷新
}
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
</script>
js:
<script>
var orientLayer = document.getElementById("orientLayer");
//判断横屏竖屏
function checkDirect() {
if (document.documentElement.clientWidth >= document.documentElement.clientHeight) {
return "portrait"; //横屏
} else {
return "landscape"; //竖屏
}
}
//显示屏幕方向提示浮层
function orientNotice() {
var orient = checkDirect();
if (orient == "landscape") {
orientLayer.style.display = "none";
} else {
orientLayer.style.display = "block";
}
}
//给屏幕添加监听事件
function init() {
orientNotice();
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
setTimeout(orientNotice, 200);
})
}
init();
</script>
好了,有了这三段代码,我们的横屏提示就已经加完了。同理竖屏提示,只需要将改变一下判断横竖屏的js代码中的判断条件即可。好啦~正值中秋,大家中秋快乐。