扯蛋无罪
大火兔
时间:2017-02-20 作者:神秘人

在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。




Html5-Html5如何做横屏适配


首先在head中加入如下代码:

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>


一:CSS判断横屏竖屏

写在同一个CSS中

@media screen and (orientation: portrait) {
  /*竖屏 css*/
} 
@media screen and (orientation: landscape) {
  /*横屏 css*/
}

分开写在2个CSS中
竖屏

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

横屏

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">


一:JS判断横屏竖屏

//判断手机横竖屏状态:
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
        if (window.orientation === 180 || window.orientation === 0) {
            alert('竖屏状态!');
        }
        if (window.orientation === 90 || window.orientation === -90 ){
            alert('横屏状态!');
        } 
    }, false);
//移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。


参考地址:http://www.cnblogs.com/webpush/p/4961977.html

文章地址:http://www.dahuotu.com/page.aspx?id=175863




如果这篇文章对你没有帮助,请留言告诉我,我们一起进步。 有用,赏一个
 
推广推荐拼图前端css响应式前端框架,去了解
关于博主

大火兔,86年生,混迹it十几年,干过产品,打过管理,揍过后台,搞过前端,挑过网管,砍过顾问。目前是拼图响应式前端框架作者/emlog博客插件作者/360、谷歌浏览器扩展插件作者,在互联网上有大部分作品。

近期公告

博客正式改版上线,此款皮肤静态页、EMLOG主题出售。

找他?  
猜你喜欢
寂寞不需要理由,爱美并不可耻

版权所有 © Dahuotu.com All Rights Reserved,Theme by 拼图

关注我们
使用微信扫一扫关注我
土豪,赏点小钱吧!
  • 通过微信,打他、赏他
  • 通过支付宝,打他、赏他