CSS（mediaquery）实现移动端横竖屏提示_html/css_WEB-ITnose

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

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

      
查看更多关于CSS（mediaquery）实现移动端横竖屏提示_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did109681