モバイルランドスケープビュー用に Web サイトを最適化する

debugcn 投稿 Dev

マーティン・ホバン

Web サイトをモバイル用に最適化しています。ほとんどのデバイスでは、ポートレートビューは完璧ですが、ランドスケープビューを選択すると、スタイルがめちゃくちゃになります。

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 を追加する必要がありますか。

ホエル

次に、jquery を使用して、体に動的な高さを与えることができます。横向きのデバイスの問題は、フッターが本文の端にあることですが、本文の高さが Web ページの高さよりも小さいため、このひどいデザインになります。

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

<!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>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]