css - 媒体查询在智能手机上无法正常工作

Question

我正在构建的网站出现问题。当我使用具有手机尺寸的调试器时，一切看起来都很棒并且可以正常工作。然而，当我使用智能手机访问该站点时，我只看到一个黑色的空白页面...

出了什么问题？

谢谢!

http://holymothership.be/

CSS

body {
    font-family:"Karla", Helvetica, Arial, sans-serif;
    font-size:20px;
    font-weight: 400;
    color: #ffffff;
    overflow: hidden;
    cursor: default;
    background-color: #000;
    display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
    display: -moz-box;      /* OLD: Firefox (buggy) */
    display: -ms-flexbox;   /* MID: IE 10 */
    display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
    display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
    -webkit-box-align: center; 
    -moz-box-align: center; /* OLD… */
    -ms-flex-align: center; /* You know the drill now… */
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center; 
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 0;
    height: 100%;
    width: 100%; /* needed for Firefox */
}

    h1,h2,h3,h4,h5,h6,p {
    /*line-height: 7vh;*/
}

h1 {
    margin-top: -5px;
    font-weight: 100;
    font-size: 1.83em;
    display: block;
}

h2 {
    margin-top: -5px;
    font-weight: 100;
    font-size: 1.83em;
    display: none;
}

h3 {
    margin-top: -5px;
    font-weight: 100;
    font-size: 1.83em;
    display: none;
}

a {
    cursor: hand;
    color: #fff;
    text-decoration: none;
}

b {
    font-weight: bold;
}   

a:hover {
    cursor: hand;
    border-bottom-style: solid;
    border-bottom-width: 0.3vh;
    border-bottom-color: #fff;
    padding-bottom: 1px;
    text-decoration: none;
}

.underline {
    cursor: hand;
    border-bottom-style: solid;
    border-bottom-width: 0.3vh;
    border-bottom-color: #fff;
    padding-bottom: 2px;
    text-decoration: none;
}

a.footer:hover{
    cursor: hand;
    border-bottom-style: solid;
    border-bottom-width: 0.2vh;
    border-bottom-color: #fff;
    padding-bottom: 0px;
    text-decoration: none;
}

#work {
    background-position: center center;
    background-repeat: no-repeat;
    background-image:url("../cover.png");
    position:absolute;
    left:0;
    top:0;
    /*background-size: contain;*/
    height:600px;
    width:600px;
    margin: -100px;
    z-index: 1;
    cursor: pointer;
}

#overlay {
    background-color: #000;
    box-shadow: 0 0 100px #ffffff;
    z-index: 9999;
    position: relative;
    width: 1000px;
    height: 700px;
    display: -webkit-box; display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center; -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg); /* IE 9 */
    -webkit-transform: rotate(-5deg); /* Chrome, Safari, Opera */
} 

#header {
    width:auto;
    font-weight: 400;
    font-family:"Karla", Helvetica, Arial, sans-serif;
    color: #FFF;
    position: absolute;
    top: 25px;
    left: 25px;
}

#footer {
    width:auto;
    position: absolute;
    bottom:25px;
    left:25px;
    right:25px;
    padding-bottom: -4px;
    }

#links {
    float:left;
    position: relative;
}

#contact {
    float:left;
    padding-left:80px;
    position: relative;
}

#secret {
    color: #000;
    float:right;
    position:relative;
}

#logo {
    position: absolute;
    margin-left: -200px;
    margin-top: -135px;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 270px;
    background-image: url("../logo.svg");
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}

#logo1 {
    float: right;
    position: absolute;
    width:150px;
    height: auto;
    bottom:25px;
    right:25px;
    padding-bottom: -4px;
}

#logo2 {
    display: none;
}

a.secret:hover{
    cursor:hand;
    text-shadow: 0 0 10px #ffffff;
    text-decoration: none;
    border-bottom-style: none;
}

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?63082030');
  src: url('../font/fontello.eot?63082030#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?63082030') format('woff'),
       url('../font/fontello.ttf?63082030') format('truetype'),
       url('../font/fontello.svg?63082030#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?63082030#fontello') format('svg');
  }
}
*/

 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  zoom: 0.8;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .6em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-twitter:before { content: '\e800'; } /* '' */
.icon-phone:before { content: '\e801'; } /* '' */
.icon-location:before { content: '\e802'; } /* '' */
.icon-mail:before { content: '\e803'; } /* '' */
.icon-facebook:before { content: '\e804'; } /* '' */
.icon-copy:before { content: '\e805'; } /* '' */

@font-face {
    font-family: 'Avara'; /*a name to be used later*/
    src: url('../font/Avara.ttf'); /*URL to font*/
}

@media only screen and (max-width: 1100px) , screen and (max-height: 840px) {
#overlay{
    width: 800px;
    height: 560px;
}

h1 {
    font-size: 1.45em;
}

#footer {
    font-size:0.8em;
}

#contact {
    padding-left:60px;
}

#logo {
    position: absolute;
    margin-left: -150px;
    margin-top: -102px;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 204px;
}

#logo1 {
    width: 120px;
}

@media only screen and (max-width: 920px) , screen and (max-height: 700px) {
#overlay{
    width: 600px;
    height: 420px;
}

h1 {
    font-size: 1.06em;
}

#footer {
    font-size:0.8em;
}

#contact {
    padding-left:40px;
}

#logo {
    position: absolute;
    margin-left: -100px;
    margin-top: -68px;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 136px;
}

#logo1 {
    width: 100px;
}

@media only screen and (max-device-width: 460px) and (orientation: portrait) {
#overlay{
    width: 220px;
    height: 380px;
}

#header {
    top: 10px;
    left: 10px;
}

h1 {
    display: none;
}

h2 {
    font-size: 1.0em;
    display: block;
}

h3 {
    display: none;
}

#footer {
    font-size:0.37em;
    bottom: 10px;
    left: 10px;
}

#contact {
    padding-left:10px;
}

#work {
    display: none;
}

#logo {
    display: none;
}

#logo1 {
    display: none;
}

#logo2 {
    width: 80px;
    height: auto;
    display: block;
    margin-top: 265px;
    left: 10px;
    position: absolute;
}

@media only screen and (max-device-width: 640px) and (orientation: landscape) {
#overlay{
    width: 380px;
    height: 220px;
}

#header {
    top: 10px;
    left: 10px;
}

h1 {
    display: none;
}

h2 {
    display: none;
}

h3 {
    font-size: 1.0em;
    display: block;
}

#footer {
    font-size:0.6em;
    bottom: 10px;
    left: 10px;
}

#contact {
    padding-left:10px;
}

#work {
    display: none;
}

#logo {
    display: none;
}

#logo1 {
    display: none;
}

#logo2 {
    width: 60px;
    height: auto;
    display: block;
    left: 310px;
    bottom: 10px;
    position: fixed;
    float: right;
}

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Holy Mothership</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<meta name="description" content="Holy Mothership is a multidisciplinary design collective based in Antwerp, Belgium."/>
<meta name="author" content="Holy Mothership"/>
<meta name="keywords" content="Holy Mothership, graphic design, studio, antwerp, collective, print, webdesign, copy, illustration"/>

    <!-- open graph -->
<meta property="og:title" content="Holy Mothership"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://holymothership.be"/>
<meta property="og:image" content="http://holymothership.be/logo-s.jpeg"/>
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
<meta property="og:description" content="Holy Mothership is a multidisciplinary design collective based in Antwerp, Belgium.
It was founded by Tom Anthoni, Benny Arts, Christophe Clarijs, Elias Derboven and Ellen Pollard."/>
<meta property="fb:admins" content="1514858388765304"/>
    <!-- end of open graph -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script language="JavaScript" src="js/script.js"></script>
<script language="JavaScript" src="js/jquery.js"></script>
<script language="JavaScript" src="js/matchmedia.js"></script>
<script language="JavaScript" src="js/analytics.js"></script>

<link href='http://fonts.googleapis.com/css?family=Karla:400,700,400italic,700italic' rel='stylesheet' type='text/css'> 
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://holymothership.be/favicon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://holymothership.be/favicon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://holymothership.be/favicon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://holymothership.be/favicon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://holymothership.be/favicon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="http://holymothership.be/favicon/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="http://holymothership.be/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="http://holymothership.be/favicon/favicon-16x16.png" sizes="16x16" />
<meta name="application-name" content="Holy Mothership"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="http://holymothership.be/favicon/mstile-144x144.png" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

<body>
<div id="work"></div>
<div id="logo"></div>
<div id="overlay">
    <div id="header">
        <h1><b><a href="http://holymothership.be/">Holy Mothership</a></b> is a multidisciplinary design collective<br>
        founded by <a href="http://tomanthoni.be/" target="_blank">Tom Anthoni</a>, <a href="http://bennyarts.com/" target="_blank">Benny Arts</a>,<br>
        <a href="http://www.christopheclarijs.be/" target="_blank">Christophe Clarijs</a>,
        <a href="http://www.eliasderboven.com/" target="_blank">Elias Derboven</a> and <a href="http://www.epwerk.be/" target="_blank">Ellen Pollard</a>.<br>
        Our studio is located in Antwerp, Belgium.</h1>

        <h2><b><a href="http://holymothership.be/">Holy Mothership</a></b> is<br>
        a multidisciplinary<br>
        design collective<br>
        founded by<br>
        <a href="http://www.christopheclarijs.be/" target="_blank">Christophe Clarijs</a>,<br>
        <a href="http://bennyarts.com/" target="_blank">Benny Arts</a>,<br>
        <a href="http://www.eliasderboven.com/" target="_blank">Elias Derboven</a>,<br>
        <a href="http://tomanthoni.be/" target="_blank">Tom Anthoni</a> and<br>
        <a href="http://www.epwerk.be/" target="_blank">Ellen Pollard</a>.<br>
        Our studio is located in Antwerp, Belgium.</h2>

        <h3><b><a href="http://holymothership.be/">Holy Mothership</a></b> is a multidisciplinary<br>
        design collective founded by<br>
        <a href="http://tomanthoni.be/" target="_blank">Tom Anthoni</a>, <a href="http://bennyarts.com/" target="_blank">Benny Arts</a>, <a href="http://www.epwerk.be/" target="_blank">Ellen Pollard</a>,<br>
        <a href="http://www.christopheclarijs.be/" target="_blank">Christophe Clarijs</a> and <a href="http://www.eliasderboven.com/" target="_blank">Elias Derboven</a>.<br>
        Our studio is located in Antwerp, Belgium.</h3>
        </div>
        <div id="footer">
            <div id="links">
                <ic class="icon-twitter"></ic><a href="https://twitter.com/holy_mothership" target="_blank" class="footer">twitter</a> <br>
                <ic class="icon-facebook"></ic><a href="https://www.facebook.com/holymothership" target="_blank" class="footer">facebook</a> <br>
                <ic class="icon-copy"></ic>2014
            </div>

            <div id="contact">
                <ic class="icon-location"></ic><a href="https://www.google.be/maps/place/Marialei+29,+2018+Antwerpen/" target="_blank" class="footer">Marialei 29, 2018 Antwerp, Belgium</a><br>
                <ic class="icon-mail"></ic><a href="mailto:contact@holymothership.be" target="_blank" class="footer">contact@holymothership.be</a><br>
                <ic class="icon-phone"></ic>+32 (0)494 39 87 82
            </div>
        </div>

        <div id="logo1">
                <img src="logo1.svg">
        </div>

        <div id="logo2">
                <img src="logo2.svg">
        </div>
</div>

<div id="footer">
    <div id="secret"><br><br>
        <a href="https://www.youtube.com/watch?v=uQFGkGk4PSc#t=486" target="_blank" class="secret" style="color:black;">The Landing of…</a>
    </div>
</div>
</body>
</html>

Answer 1

我编辑了你的 JSFiddle - http://jsfiddle.net/xdm6or92/我为 iPhone 纵向和横向模式添加了两个媒体查询。使用 JSFiddle 很难测试响应式页面，所以我在我的私有(private)服务器上上传了工作示例。这样您就可以从您的 iPhone 或其他智能手机进入页面并查看它是否正常工作。链接 - http://mikemoney.nazwa.pl/holymothership/ .

iPhone 的媒体查询

/*iPhone portrait orientation for Safari */
@media only screen and (max-device-width: 460px) and (orientation: portrait) {
    .iphone-portrait {
        display: block;
    }
}
/*iPhone portrait orientation for Safari */
@media only screen and (max-device-width: 640px) and (orientation: landscape) {
    #overlay {
        width: 500px;
        height: 460px;
    }

    .iphone-landscape {
        display: block;
        color:blue;
    }
}

完整的工作示例[代码] http://mikemoney.nazwa.pl/holymothership/ .

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style type="text/css">
    body {
        font-family:"Karla", Helvetica, Arial, sans-serif;
        font-size:20px;
        font-weight: 400;
        color: #ffffff;
        overflow: hidden;
        cursor: default;
        background-color: #000;
        display: -webkit-box;
        /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
        display: -moz-box;
        /* OLD: Firefox (buggy) */
        display: -ms-flexbox;
        /* MID: IE 10 */
        display: -webkit-flex;
        /* NEW, Chrome 21–28, Safari 6.1+ */
        display: flex;
        /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */
        -webkit-box-align: center;
        -moz-box-align: center;
        /* OLD… */
        -ms-flex-align: center;
        /* You know the drill now… */
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        margin: 0;
        height: 100%;
        width: 100%;
        /* needed for Firefox */
    }
    h1, h2, h3, h4, h5, h6, p {
        /*line-height: 7vh;*/
    }
    h1 {
        margin-top: -5px;
        font-weight: 100;
        font-size: 1.83em;
        display: block;
    }
    h2 {
        margin-top: -5px;
        font-weight: 100;
        font-size: 1.83em;
        display: none;
    }
    h3 {
        margin-top: -5px;
        font-weight: 100;
        font-size: 1.83em;
        display: none;
    }
    a {
        cursor: hand;
        color: #fff;
        text-decoration: none;
    }
    b {
        font-weight: bold;
    }
    a:hover {
        cursor: hand;
        border-bottom-style: solid;
        border-bottom-width: 0.3vh;
        border-bottom-color: #fff;
        padding-bottom: 1px;
        text-decoration: none;
    }
    .underline {
        cursor: hand;
        border-bottom-style: solid;
        border-bottom-width: 0.3vh;
        border-bottom-color: #fff;
        padding-bottom: 2px;
        text-decoration: none;
    }
    a.footer:hover {
        cursor: hand;
        border-bottom-style: solid;
        border-bottom-width: 0.2vh;
        border-bottom-color: #fff;
        padding-bottom: 0px;
        text-decoration: none;
    }
    #work {
        background-position: center center;
        background-repeat: no-repeat;
        background-image:url("../cover.png");
        position:absolute;
        left:0;
        top:0;
        /*background-size: contain;*/
        height:600px;
        width:600px;
        margin: -100px;
        z-index: 1;
        cursor: pointer;
    }
    #overlay {
        background-color: #000;
        box-shadow: 0 0 100px #ffffff;
        z-index: 9999;
        position: relative;
        width: 1000px;
        height: 700px;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        /* IE 9 */
        -webkit-transform: rotate(-5deg);
        /* Chrome, Safari, Opera */
    }
    #header {
        width:auto;
        font-weight: 400;
        font-family:"Karla", Helvetica, Arial, sans-serif;
        color: #FFF;
        position: absolute;
        top: 25px;
        left: 25px;
    }
    #footer {
        width:auto;
        position: absolute;
        bottom:25px;
        left:25px;
        right:25px;
        padding-bottom: -4px;
    }
    #links {
        float:left;
        position: relative;
    }
    #contact {
        float:left;
        padding-left:80px;
        position: relative;
    }
    #secret {
        color: #000;
        float:right;
        position:relative;
    }
    #logo {
        position: absolute;
        margin-left: -200px;
        margin-top: -135px;
        top: 50%;
        left: 50%;
        width: 400px;
        height: 270px;
        background-image: url("../logo.svg");
        background-position: center center;
        background-repeat: no-repeat;
        cursor: pointer;
    }
    #logo1 {
        float: right;
        position: absolute;
        width:150px;
        height: auto;
        bottom:25px;
        right:25px;
        padding-bottom: -4px;
    }
    #logo2 {
        display: none;
    }
    a.secret:hover {
        cursor:hand;
        text-shadow: 0 0 10px #ffffff;
        text-decoration: none;
        border-bottom-style: none;
    }
    @font-face {
        font-family:'fontello';
        src: url('../font/fontello.eot?63082030');
        src: url('../font/fontello.eot?63082030#iefix') format('embedded-opentype'), url('../font/fontello.woff?63082030') format('woff'), url('../font/fontello.ttf?63082030') format('truetype'), url('../font/fontello.svg?63082030#fontello') format('svg');
        font-weight: normal;
        font-style: normal;
    }
    /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */

    /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */

    /*
    @media screen and (-webkit-min-device-pixel-ratio:0) {
      @font-face {
        font-family: 'fontello';
        src: url('../font/fontello.svg?63082030#fontello') format('svg');
      }
    }
    */
    [class^="icon-"]:before, [class*=" icon-"]:before {
        font-family:"fontello";
        font-style: normal;
        font-weight: normal;
        speak: none;
        zoom: 0.8;
        display: inline-block;
        text-decoration: inherit;
        width: 1em;
        margin-right: .6em;
        text-align: center;
        /* opacity: .8; */
        /* For safety - reset parent styles, that can break glyph codes*/
        font-variant: normal;
        text-transform: none;
        /* fix buttons height, for twitter bootstrap */
        line-height: 1em;
        /* Animation center compensation - margins should be symmetric */
        /* remove if not needed */
        margin-left: .2em;
        /* you can be more comfortable with increased icons size */
        /* font-size: 120%; */
        /* Uncomment for 3D effect */
        /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }
    .icon-twitter:before {
        content:'\e800';
    }
    /* '' */
    .icon-phone:before {
        content:'\e801';
    }
    /* '' */
    .icon-location:before {
        content:'\e802';
    }
    /* '' */
    .icon-mail:before {
        content:'\e803';
    }
    /* '' */
    .icon-facebook:before {
        content:'\e804';
    }
    /* '' */
    .icon-copy:before {
        content:'\e805';
    }
    /* '' */
    @font-face {
        font-family:'Avara';
        /*a name to be used later*/
        src: url('../font/Avara.ttf');
        /*URL to font*/
    }
    .iphone-portrait, .iphone-landscape {
        display: none;
        color: red;
    }


    @media only screen and (max-device-width: 1100px), screen and (max-device-height: 840px) {
        #overlay {
            width: 800px;
            height: 560px;
        }

        h1 {
            font-size: 1.45em;
        }

        #footer {
            font-size: 0.8em;
        }

        #contact {
            padding-left: 60px;
        }

        #logo {
            position: absolute;
            margin-left: -150px;
            margin-top: -102px;
            top: 50%;
            left: 50%;
            width: 300px;
            height: 204px;
        }

        #logo1 {
            width: 120px;
        }
    }
    @media only screen and (max-device-width: 920px), screen and (max-device-height: 700px) {
            #overlay {
                width: 600px;
                height: 420px;
            }

            h1 {
                font-size: 1.06em;
            }

            #footer {
                font-size: 0.8em;
            }

            #contact {
                padding-left: 40px;
            }

            #logo {
                position: absolute;
                margin-left: -100px;
                margin-top: -68px;
                top: 50%;
                left: 50%;
                width: 200px;
                height: 136px;
            }

            #logo1 {
                width: 100px;
            }
        }
    @media only screen and (max-device-width: 700px), only screen and (max-device-height: 530px) {
                #overlay {
                    width: 220px;
                    height: 380px;
                }

                #header {
                    top: 10px;
                    left: 10px;
                }

                h1 {
                    display: none;
                }

                h2 {
                    font-size: 1.0em;
                    display: block;
                }

                h3 {
                    display: none;
                }

                #footer {
                    font-size: 0.37em;
                    bottom: 10px;
                    left: 10px;
                }

                #contact {
                    padding-left: 10px;
                }

                #work {
                    display: none;
                }

                #logo {
                    display: none;
                }

                #logo1 {
                    display: none;
                }

                #logo2 {
                    width: 80px;
                    height: auto;
                    display: block;
                    margin-top: 265px;
                    left: 10px;
                    position: absolute;
                }
            }
    @media only screen and (max-device-height: 460px) {
                    #overlay {
                        width: 380px;
                        height: 220px;
                    }

                    #header {
                        top: 10px;
                        left: 10px;
                    }

                    h1 {
                        display: none;
                    }

                    h2 {
                        display: none;
                    }

                    h3 {
                        font-size: 1.0em;
                        display: block;
                    }

                    #footer {
                        font-size: 0.6em;
                        bottom: 10px;
                        left: 10px;
                    }

                    #contact {
                        padding-left: 10px;
                    }

                    #work {
                        display: none;
                    }

                    #logo {
                        display: none;
                    }

                    #logo1 {
                        display: none;
                    }

                    #logo2 {
                        width: 60px;
                        height: auto;
                        display: block;
                        left: 310px;
                        bottom: 10px;
                        position: fixed;
                        float: right;
                    }
                }


    /*iPhone portrait orientation for Safari */
    @media only screen and (max-device-width: 460px) and (orientation: portrait) {
        .iphone-portrait {
            display: block;
        }
    }
    /*iPhone portrait orientation for Safari */
    @media only screen and (max-device-width: 640px) and (orientation: landscape) {
        #overlay {
            width: 500px;
            height: 460px;
        }

        .iphone-landscape {
            display: block;
            color:blue;
        }
    }

</style>

</head>

<body>
<div id="work"></div>
<div id="logo"></div>
<div id="overlay">
    <div id="header">
        <h1><b><a href="http://holymothership.be/">Holy Mothership</a></b> is a multidisciplinary design collective<br>
            founded by <a href="http://tomanthoni.be/" target="_blank">Tom Anthoni</a>, <a href="http://bennyarts.com/" target="_blank">Benny Arts</a>,<br>
            <a href="http://www.christopheclarijs.be/" target="_blank">Christophe Clarijs</a>,
            <a href="http://www.eliasderboven.com/" target="_blank">Elias Derboven</a> and <a href="http://www.epwerk.be/" target="_blank">Ellen Pollard</a>.<br>
            Our studio is located in Antwerp, Belgium.</h1>

        <h2><b><a href="http://holymothership.be/">Holy Mothership</a></b> is<br>
            a multidisciplinary<br>
            design collective<br>
            founded by<br>
            <a href="http://www.christopheclarijs.be/" target="_blank">Christophe Clarijs</a>,<br>
            <a href="http://bennyarts.com/" target="_blank">Benny Arts</a>,<br>
            <a href="http://www.eliasderboven.com/" target="_blank">Elias Derboven</a>,<br>
            <a href="http://tomanthoni.be/" target="_blank">Tom Anthoni</a> and<br>
            <a href="http://www.epwerk.be/" target="_blank">Ellen Pollard</a>.<br>
            Our studio is located in Antwerp, Belgium.</h2>

        <h3><b><a href="http://holymothership.be/">Holy Mothership</a></b> is a multidisciplinary<br>
            design collective founded by<br>
            <a href="http://tomanthoni.be/" target="_blank">Tom Anthoni</a>, <a href="http://bennyarts.com/" target="_blank">Benny Arts</a>, <a href="http://www.epwerk.be/" target="_blank">Ellen Pollard</a>,<br>
            <a href="http://www.christopheclarijs.be/" target="_blank">Christophe Clarijs</a> and <a href="http://www.eliasderboven.com/" target="_blank">Elias Derboven</a>.<br>
            Our studio is located in Antwerp, Belgium.</h3>
             <div class="iphone-portrait">It's portrait mode</div>
             <div class="iphone-landscape">It's landscape mode</div>

    </div>
    <div id="footer">
        <div id="links">
            <ic class="icon-twitter"></ic><a href="https://twitter.com/holy_mothership" target="_blank" class="footer">twitter</a>
            <br>
            <ic class="icon-facebook"></ic><a href="https://www.facebook.com/holymothership" target="_blank" class="footer">facebook</a>
            <br>
            <ic class="icon-copy"></ic>2014</div>
        <div id="contact">
            <ic class="icon-location"></ic><a href="https://www.google.be/maps/place/Marialei+29,+2018+Antwerpen/" target="_blank" class="footer">Marialei 29, 2018 Antwerp, Belgium</a>
            <br>
            <ic class="icon-mail"></ic><a href="mailto:contact@holymothership.be" target="_blank" class="footer">contact@holymothership.be</a>
            <br>
            <ic class="icon-phone"></ic>+32 (0)494 39 87 82</div>
    </div>
</div>
<div id="footer">
    <div id="secret">
        <br>
        <br> <a href="https://www.youtube.com/watch?v=uQFGkGk4PSc#t=486" target="_blank" class="secret" style="color:black;">The Landing of…</a>

    </div>
</div>
</body>

</html>