モバイルランドスケープビューのウェブサイトを最適化

モバイル用にウェブサイトを最適化しています。ほとんどのデバイスでは、ポートレートビューは完璧ですが、私がランドスケープビューを選択すると、スタイリングが台無しになります。モバイルランドスケープビューのウェブサイトを最適化

HTML

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="css/style.css" type="text/css"> 
    <title>Get My Look - Home</title> 
</head> 
<body> 
<div id="header"> 
    <ul> 
     <li class="selected"> 
      <a href="index.html">Home</a> 
     </li> 
     <li> 
      <a href="about.html">About</a> 
     </li> 
     <li> 
      <a href="download.html">Download</a> 
     </li> 
     <li> 
      <a href="contact.html">Contact</a> 
     </li> 
    </ul> 
</div> 
<div id="content"> 
<img src="images/logo.png" alt=""> 
</div> 
<div id="footer"> 
    <p> 
     &copy; 2017 - Get My Look 
    </p> 
<div id="links"> 
    <ul> 
     <li> 
     <a href="https://www.facebook.com/getmylookapp/" target="_blank"> 
      <img src="images/facebook.png" alt="" width="64" height="64"> 
      </a> 
     </li> 
     <li> 
     <a href="https://twitter.com/getmylookapp" target="_blank"> 
      <img src="images/twitter.png" alt="" width="64" height="64"> 
      </a> 
     </li> 
     <li> 
     <a href="https://www.instagram.com/getmylookapp/" target="_blank"> 
      <img src="images/instagram.png" alt="" width="64" height="64"> 
      </a> 
     </li> 
     <li> 
     <a href="https://www.snapchat.com/add/getmylookapp" target="_blank"> 
      <img src="images/snapchat.png" alt="" width="64" height="64"> 
      </a> 
     </li> 
    </ul> 
</div> 
</div> 
</body> 
</html>

CSS

body{ 
    background-color: #00B2EE; 
    margin: 0; 
    font-family: "Verdana"; 
} 

#header{ 
    position:absolute; 
    height: 50px; 
    width: 100%; 
    background-color: white; 
} 

#links{ 
    position:absolute; 
    top: -150px; 
    height: 150px; 
    width: 100%; 
    background-color: white; 
} 

#footer{ 
    position:absolute; 
    bottom:0; 
    height: 50px; 
    width: 100%; 
    background-color: black; 
} 

p{ 
    text-align: right; 
    color: white; 
    margin-right: 1%; 
} 

#social{ 
    text-align: center; 
    color: black; 
} 

#header ul li { 
    list-style: none; 
    float: left; 
} 

#header ul li a { 
    color: black; 
    margin: 25px; 
    text-decoration: none; 
} 

#header ul li.selected a { 
    border-bottom: solid 2px #000000; 
    display: inline; 
    padding-bottom: 3px; 
} 

#links ul{ 
    display: flex; 
    justify-content: center; 
    padding-left: 5px; 
} 

#links ul li { 
    list-style: none; 
    float: left; 
    margin: 30px; 
} 

#content{ 
    width: 100%; 
    height: 600px; 
    text-align: center; 
    padding-top: 50px; 
} 

h1{ 
    padding-top: 50px; 
} 

* { 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-font-smoothing: antialiased; 
    -moz-font-smoothing: antialiased; 
    -o-font-smoothing: antialiased; 
    font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
} 

.container { 
    max-width: 400px; 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
    padding-top: 50px; 
} 

#contact input[type="text"], 
#contact input[type="email"], 
#contact textarea, 
#contact button[type="submit"] { 
    font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif; 
} 

#contact { 
    background: #FFF; 
    padding: 25px; 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); 
} 

#contact h3 { 
    display: block; 
    font-size: 30px; 
    font-weight: 300; 
} 

#contact h4 { 
    margin: 5px 0 15px; 
    display: block; 
    font-size: 13px; 
    font-weight: 400; 
} 

fieldset { 
    border: medium none !important; 
    margin: 0 0 10px; 
    min-width: 100%; 
    padding: 0; 
    width: 100%; 
} 

#contact input[type="text"], 
#contact input[type="email"], 
#contact textarea { 
    width: 100%; 
    border: 1px solid #ccc; 
    background: #FFF; 
    margin: 0 0 5px; 
    padding: 10px; 
} 

#contact input[type="text"]:hover, 
#contact input[type="email"]:hover, 
#contact textarea:hover { 
    -webkit-transition: border-color 0.3s ease-in-out; 
    -moz-transition: border-color 0.3s ease-in-out; 
    transition: border-color 0.3s ease-in-out; 
    border: 1px solid #aaa; 
} 

#contact textarea { 
    height: 100px; 
    max-width: 100%; 
    resize: none; 
} 

#contact button[type="submit"] { 
    cursor: pointer; 
    width: 100%; 
    border: none; 
    background: #00B2EE; 
    color: #FFF; 
    margin: 0 0 5px; 
    padding: 10px; 
    font-size: 15px; 
} 

#contact button[type="submit"]:hover { 
    background: #009ACD; 
    -webkit-transition: background 0.3s ease-in-out; 
    -moz-transition: background 0.3s ease-in-out; 
    transition: background-color 0.3s ease-in-out; 
} 

#contact button[type="submit"]:active { 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); 
} 

.copyright { 
    text-align: center; 
} 

#contact input:focus, 
#contact textarea:focus { 
    outline: 0; 
    border: 1px solid #aaa; 
} 

::-webkit-input-placeholder { 
    color: #888; 
} 

:-moz-placeholder { 
    color: #888; 
} 

::-moz-placeholder { 
    color: #888; 
} 

:-ms-input-placeholder { 
    color: #888; 
} 

media screen and (max-width: 1020px) { 
#header, #content, #footer { 
    float: none; 
    width: auto; 
    }

}以下1020pxその画面サイズを持つサイトを訪問するすべてのデバイスのためにそう

、それに応じて調整します。

肖像

風景

何CSS私はこの問題を解決するために追加する必要があります。

出典

2017-05-11 Martin Hoban

の底にとどまります。ランドスケープデバイスの問題は、フッターがボディの端にあることですが、ボディの高さはウェブページの高さよりも小さく、このひどいデザインが得られます。

だから、問題がまだそこにあるこの

<!DOCTYPE HTML> 
<html> 

<head> 
<meta charset="UTF-8"> 
<link rel="stylesheet" href="css/style.css" type="text/css"> 
<title>Get My Look - Home</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     var h = $(window).height(); 
     $('body').css({ 
      "min-height": h 
     }) 
    }); 
</script> 
</head> 

<body> 
<div id="header"> 
    <ul> 
     <li class="selected"> 
      <a href="index.html">Home</a> 
     </li> 
     <li> 
      <a href="about.html">About</a> 
     </li> 
     <li> 
      <a href="download.html">Download</a> 
     </li> 
     <li> 
      <a href="contact.html">Contact</a> 
     </li> 
    </ul> 
</div> 
<div id="content"> 
    <img src="images/logo.png" alt=""> 
</div> 
<div id="footer"> 
    <p> 
     &copy; 2017 - Get My Look 
    </p> 
    <div id="links"> 
     <ul> 
      <li> 
       <a href="https://www.facebook.com/getmylookapp/" target="_blank"> 
        <img src="images/facebook.png" alt="" width="64" height="64"> 
       </a> 
      </li> 
      <li> 
       <a href="https://twitter.com/getmylookapp" target="_blank"> 
        <img src="images/twitter.png" alt="" width="64" height="64"> 
       </a> 
      </li> 
      <li> 
       <a href="https://www.instagram.com/getmylookapp/" target="_blank"> 
        <img src="images/instagram.png" alt="" width="64" height="64"> 
       </a> 
      </li> 
      <li> 
       <a href="https://www.snapchat.com/add/getmylookapp" target="_blank"> 
        <img src="images/snapchat.png" alt="" width="64" height="64"> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 
</body> 

</html>

出典

2017-05-11 14:43:10

あなたはこれを行うことができます：

@media all and (orientation:landscape) { 
    body { 
     position: relative; 
    } 

    #footer { 
     position: absolute; 
     bottom: 0; 
    } 
}

そうすれば、あなたのフッターは常に、あなたがあなたの体に動的な高さを与えるためにjqueryのを使用することができ、あなたのページ

出典

2017-05-11 13:43:02

を行うことができます。このコードは何も調整しませんでした。 –

これはおそらくCSSの1行の代わりにコードの残りの部分を指定すると役に立ちます。 –

質問が更新されました！ –

モバイルランドスケープビューのウェブサイトを最適化

答えて

関連する問題