css 模拟器方向_纯CSS（media queries）实现移动端横竖屏提示

在移动端的布局开发中经常要考虑到横竖屏所带来的不同布局， 但有时候我们只仅做了横向或纵向布局，为了更好的用户体验在没有做布局的页面放一个提示会更加友好。网上有人写了一些插件来方便开发者一键添加，比如这篇博客中提到的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

请使用移动终端竖屏浏览,体验更佳

Content

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就可以搞定了。