在移动端的布局开发中经常要考虑到横竖屏所带来的不同布局, 但有时候我们只仅做了横向或纵向布局,为了更好的用户体验在没有做布局的页面放一个提示会更加友好。网上有人写了一些插件来方便开发者一键添加,比如这篇博客中提到的lanscape.js的小插件就比较方便(文章链接:移动页面横竖屏切换提示) 但我看了下它的源码和实现方式觉得这么一个小功能开销有点大了, 这里只需用到css中的media queries响应式布局就可以很好的解决这个问题,关键点就在于css的media queries可以自动识别横竖屏(它主要基于屏幕的宽高比来判断,与移动端的window.orientation还是有区别的),这样做还有一个用处,就是PC上浏览一般为landscape的布局, 有些针对移动端的网页在此也顺便提示了用户在移动设备上浏览。
css media query的横竖屏布局:
竖屏(portrait):
@media screen and (orientation:portrait)
横屏(landscape):
@media screen and (orientation:landscape)
逻辑是我们预先设置一个提示div, 默认显示,在样式中设置竖屏或横屏隐藏,就实现了横竖屏的提示了,没demo说个p啊:
横竖屏提示(在手机或模拟器上运行)
PS:直接点击链接,改变浏览器视窗宽度即可看到当宽度小于高度时即切换到content页面
代码:
HTML
<div class="lock_wrp" id="lock">
<div class="lock">
<i></i><br>
请使用移动终端竖屏浏览,体验更佳
</div>
</div>
<div id="content">Content</div>
CSS:
@media screen and (orientation:portrait) {
.lock_wrp {
display: none!important
}
}
@media screen and (orientation:landscape) {
#content {
display: none!important
}
}
.lock_wrp {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
left: 0;
top: 0;
background-color: #3c98d1;
color: rgba(255,255,255,.8);
z-index: 9999
}
.lock {
position: absolute;
left: 50%;
top: 50%;
width: 250px;
height: 150px;
margin: -75px 0 0 -125px;
text-align: center
}
.lock i {
position: relative;
display: block;
width: 74px;
height: 110px;
background: url(http://i11.tietuku.com/8f15d51b901bd922.png) 0 0 no-repeat;
background-size: 100%;
margin: 0 auto;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-animation: iphone 1.6s ease-in infinite;
animation: iphone 1.6s ease-in infinite
}
@-webkit-keyframes iphone {
0% {
-webkit-transform:rotate(-90deg)
}
25% {
-webkit-transform:rotate(0deg)
}
50% {
-webkit-transform:rotate(0deg)
}
75% {
-webkit-transform:rotate(-90deg)
}
100% {
-webkit-transform:rotate(-90deg)
}
}
@keyframes iphone {
0% {
transform:rotate(-90deg)
}
25% {
transform:rotate(0deg)
}
50% {
transform:rotate(0deg)
}
75% {
transform:rotate(-90deg)
}
100% {
transform:rotate(-90deg)
}
}
#content{position: absolute;width:100%;height:100%;background:#3c98d1;overflow: hidden;
left: 0;
top: 0;color:white;}
另外在移动设备中一般都会有window.orientation 判断横竖屏状态的API,不过如果仅仅是做到提示功能,似乎并不需要JS的介入, 仅凭CSS就可以搞定了。