CSS(media query)实现移动端横竖屏提示_html/css_WEB-ITnose
Jun 24, 2016 am 11:35 AM
在移动端的布局开发中经常要考虑到横竖屏所带来的不同布局, 但有时候我们只竖屏或者横屏的布局,为了更好的用户体验在没有做布局的页面放一个提示会更加友好。网上有人写了一些插件来方便开发者一键添加,比如这篇博客中提到的lanscape.js的小插件就比较方便(文章链接:移动页面横竖屏切换提示) 但我看了下它的源码和实现方式觉得这么一个小功能开销有点大了, 这里只需用到css中的media query响应式布局就可以很好的解决这个问题,关键点就在于css的media query可以自动识别横竖屏(它主要基于屏幕的宽高比来判断,与移动端的window.orientation还是有区别的),这样做还有一个用处,就是PC上浏览一般为landscape的布局, 有些针对移动端的网页在此也顺便提示了用户在移动设备上浏览。
css media query的横竖屏布局:
竖屏(portrait):
@media screen and (orientation:portrait)
横屏(landscape):
@media screen and (orientation:landscape)
逻辑是我们预先设置一个提示div, 默认显示,在样式中设置竖屏或横屏隐藏,就实现了横竖屏的提示了,没demo说个p啊:
横竖屏提示(在手机或模拟器上运行)
代码:
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) {.pages { 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就可以搞定了。

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?
