手機上的網站寬度太短（HTML/CSS）

嗨，我有一個相當的問題，我已經開發了這個網站。除了移動解決方案之外，大多數屏幕都可以。它出於某種原因減少了寬度，我似乎無法爲我的生活找到問題的根源。手機上的網站寬度太短（HTML/CSS）

下面的代碼：

html { 
 
    margin: 0; 
 
    padding: 0; 
 
    background-color: #0c0e1b; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
/*contact bar*/ 
 

 
.contact-bar { 
 
width: 100%; 
 
height: 3.5em; 
 
top: 0; 
 
float: left; 
 
background-color: #0c0e1b; 
 
color: #fff; 
 
z-index: 999; 
 
border-bottom: solid 1px #232737; 
 
} 
 

 
.contact-bar p { 
 
    margin-left: 19%; 
 
    padding-bottom: 2em; 
 
} 
 

 
.myaccount { 
 
    top: 0%; 
 
    position: absolute; 
 
    text-align: center; 
 
    right: 0; 
 
    padding-right: 25%; 
 
} 
 

 
.phoneemail { 
 
    top: 0; 
 
    position: absolute; 
 
    text-align: center; 
 
    margin-left: 19%; 
 
} 
 

 
.phoneemail img { 
 
vertical-align: bottom; 
 
} 
 

 
.phoneemail th { 
 
    font-weight: normal; 
 
    font-size: 1em; 
 
} 
 

 
.myaccount { 
 
    right: 0; 
 
    top: 0; 
 
    margin-top: 1em; 
 
    position: absolute; 
 
} 
 

 
/*navigation menu + logo */ 
 
.logo { 
 
    display: inline-block; 
 
    margin-left: -22%; 
 
    padding-bottom: 1.5em; 
 
    height: auto;; 
 
    width: auto;; 
 
} 
 

 
.search-icon { 
 
    display: inline-block; 
 
    padding: 0.2em; 
 
    padding-bottom: 2.2em; 
 
    padding-left: 1.5em; 
 
} 
 

 
.search-icon:hover { 
 
    opacity: 0.5; 
 
} 
 

 
.checkout { 
 
    display: inline-block; 
 
    padding: 0.2em; 
 
    padding-bottom: 2.2em; 
 
} 
 

 
.checkout:hover { 
 
    opacity: 0.5; 
 
} 
 

 

 
.top-bar { 
 
    width: 100%; 
 
    height: 7.4em; 
 
    background-color: #0c0e1b; 
 
    top: 0; 
 
    float: right; 
 
} 
 

 
.nav-item { 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
    padding-left: 1em; 
 
    float: left; 
 
    color: #fff; 
 
    display: inline-block; 
 
    padding-bottom: 2.5em; 
 
    font-size: 1.2em; 
 
} 
 

 
.top-nav { 
 
    margin-left:10%; 
 
} 
 
.top-nav ul { 
 
    text-align: center; 
 
} 
 

 
.top-nav li { 
 
    display: inline-block; 
 
} 
 

 
.top-nav > ul { 
 
    text-decoration: none; 
 
    list-style-type: none; 
 
} 
 

 
.top-nav a:hover { 
 
    color: #e3b05f; 
 
    text-decoration: none; 
 
} 
 

 
/*banner*/ 
 

 
.banner { 
 
    background-color: #fff; 
 
    width: 100%; 
 
    height: 60em; 
 
} 
 

 
.banner img { 
 
    width: 100%; 
 
} 
 

 
/*exclusive section*/ 
 
.exclusive { 
 
    position: relative; 
 
    top: 100%; 
 
    background-color: #fff; 
 
    width: 100%; 
 
    float: left; 
 
    padding-top: 2%; 
 
    padding-bottom: 2%; 
 
    z-index: 999; 
 
} 
 

 

 
.exclusive img:hover { 
 
    opacity: 0.5; 
 

 
} 
 

 
/*royal banner*/ 
 

 
.royal-banner { 
 
    width: 100%; 
 
    position: relative; 
 

 
} 
 

 
.royal-banner img { 
 
    width: 100%; 
 
} 
 

 
/*rings section*/ 
 

 
.rings { 
 
    width: 100%; 
 
    margin: auto; 
 
    background-color: #fff; 
 
} 
 

 
.rings h3 { 
 
padding-top: 1.5em; 
 
    font-size: 1.5em; 
 
    color: #a6834b; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-weight: normal; 
 
} 
 

 
.rings img { 
 
padding-top: 0.5em; 
 
} 
 

 
.ring-content { 
 
    margin:auto; 
 
    width:46em; 
 
    padding-bottom: 4em; 
 
    text-align: center; 
 
} 
 

 
.rings h3 { 
 
    font-size: 2em; 
 
    text-align: center; 
 
} 
 

 
.tgg {border-collapse:collapse;border-spacing:0;} 
 
.tgg td{ 
 
    overflow:hidden; 
 
    width: 100%; 
 
} 
 

 
.tgg h3 { 
 
    color: #222; 
 
    font-weight: bold; 
 
    font-size: 1em; 
 
word-spacing: 0.3em; 
 
padding-right: 5%; 
 
padding-left: 5%; 
 
} 
 

 
.tgg h4 { 
 
    color: #a6834b; 
 
    font-size: 1.5em; 
 
} 
 
.tgg th{ 
 
    font-size:14px; 
 
    font-weight:normal; 
 
    padding:10px 5px; 
 
    overflow:hidden; 
 
} 
 
.tgg .tg-r4y5{background-color:#fcf7f3;} 
 
.tgg .tg-a8i3{background-color:#fcf7f3;text-align:center;} 
 
.tgg .tg-i81m{background-color:#ffffff;text-align:center;} 
 
.tgg .tg-3we0{background-color:#ffffff;} 
 

 
#addcart { 
 
    cursor:pointer; 
 
    background:#c89a4f; /*the colour of the button*/ 
 
border:1px solid ##c89a4f; /*required or the default border for the browser will appear*/ 
 
/*give the button curved corners, alter the size as required*/ 
 
    border-radius: 50px; 
 
-moz-border-radius: 50px; 
 
-webkit-border-radius: 50px; 
 
border: 2px solid #c89a4f; 
 
color: #000; 
 
padding: 0.5em; 
 
font-size: 1em; 
 
font-weight: bold; 
 
font-family: "Open Sans", sans-serif; 
 
} 
 

 
input#addcart:hover, input#addcart:focus{ 
 
background-color :#e9b45c; /*make the background a little darker*/ 
 
/*reduce the drop shadow size to give a pushed button effect*/ 
 
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75); 
 
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75); 
 
box-shadow: 0 0 1px rgba(0,0,0, .75); 
 
} 
 

 
/*blog section*/ 
 

 
.blog { 
 
    width: 100%; 
 
    background-color: #fcf7f3; 
 
    margin: 0; 
 
    float: left; 
 
    padding-bottom: 5em; 
 
} 
 

 
.blog h3 { 
 
    text-align: center; 
 
    font-size: 2em; 
 
} 
 

 
.blog ul { 
 
    text-decoration: none; 
 
    list-style-type: none; 
 
    width: 65%; 
 
    margin: 0px auto; 
 
} 
 

 
.blog li { 
 
    text-align: left; 
 
    display: inline-block; 
 
    width: 29.5%; 
 
    color: #aa9146; 
 
    vertical-align: middle; 
 
} 
 

 
#blogtable { 
 
    width: 10%; 
 
} 
 

 
#blogtable h3 { 
 
    text-align: left; 
 
    font-weight: bold; 
 
    font-size: 1.3em; 
 
    color: #222; 
 
    padding: 0; 
 
} 
 

 
#blogtable p { 
 
    text-align: left; 
 
    font-size: 0.9em; 
 
    color: #7a7878; 
 
    font-family: "Open Sans", sans-serif; 
 
} 
 

 
#blogarrowright { 
 
position: relative; 
 
vertical-align: middle; 
 
margin-top: -670%; 
 
} 
 

 
#blogarrowleft { 
 

 
} 
 

 
#blogarrowleft:hover { 
 
    opacity: 0.5; 
 
} 
 

 
#blogarrowright:hover { 
 
    opacity: 0.5; 
 
} 
 

 
/*bottom section*/ 
 
.bottom-wrapper { 
 
    background-color: #0c0e1b; 
 
    width: 100%; 
 
    padding-bottom: 3em; 
 
} 
 

 
.bottom-wrapper a { 
 
    color: #acacac; 
 
    text-decoration: none; 
 
} 
 

 
.bottom-wrapper a:hover { 
 
    color: #aa9146; 
 
} 
 
.bottom { 
 
    background-color: #0c0e1b; 
 
    width: 50%; 
 
    margin-left: 15%; 
 
    position: relative; 
 
    display: inline-block; 
 
    color: #fff; 
 
    -webkit-columns: 3; 
 
    -moz-columns: 3; 
 
    columns: 3; 
 
    column-gap: unset; 
 
    padding: 0; 
 
    padding-bottom: 3em; 
 
} 
 

 
.bottom h3 { 
 
    font-weight: lighter; 
 
    font-size: 1.5em; 
 
    padding: 0; 
 
    color: #aa9146; 
 
} 
 

 
.bottom ul { 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
    margin: auto; 
 
    padding: 0; 
 
    font-family: "Open sans", sans-serif; 
 
    font-size: 0.85em; 
 
    color: #acacac; 
 
} 
 

 
.bottom li { 
 
    padding-bottom: .85em; 
 
} 
 

 
/*newsletter section*/ 
 
.newsletters { 
 
position: relative; 
 
color: #acacac; 
 
display: inline-block; 
 
} 
 

 
.newsletters { 
 
    text-decoration: none; 
 
    list-style-type: none; 
 
} 
 

 
.newsletters h3 { 
 
    font-size: 1.5em; 
 
    color: #aa9146; 
 
    font-weight: normal; 
 
} 
 

 
.newsletters img:hover { 
 
    opacity: 0.5; 
 
} 
 

 

 
/*bottom bar (copyright)*/ 
 
.bottom-bar-wrapper { 
 
    width: 100%; 
 
    background-color: #0c0e1b; 
 
    position: relative; 
 
} 
 

 
.bottom-bar { 
 
margin-left: 15%; 
 
    width: 63%; 
 
    background-color: #0c0e1b; 
 
    border-top: 1px solid rgb(255,255,255); 
 

 
} 
 

 
.bottom-bar table th { 
 
    padding-left: 3%; 
 
    font-weight: normal; 
 
} 
 

 
/*.bottom-bar l { 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
    margin-left: 10%; 
 
    float: left; 
 
    padding-left: 0.5em; 
 
    padding-top: 2em; 
 
    background-color: #0c0e1b; 
 
}*/ 
 

 
.bottom-bar p { 
 
    width: 250px; 
 
    text-align: center; 
 
    color: #acacac; 
 
    font-family: "Open sans", sans-serif; 
 
    font-size: 0.80em; 
 
    float: left; 
 
    padding-left: 10%; 
 
    padding-bottom: 1.5%; 
 
    padding-top: 1.5%; 
 
    margin: auto; 
 
} 
 

 
/*copyright bar */ 
 
.copyright-bar { 
 
position: relative;; 
 
    width: 100%; 
 
    float: left; 
 
    background-color: #000000; 
 
} 
 

 
.copyright-bar p { 
 
    font-family: "Open sans", sans-serif; 
 
    color: #acacac; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 0.9em; 
 
} 
 

 
.copyright-bar a { 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    color: #aa9146; 
 
} 
 

 
.copyright-bar a:hover { 
 
    color: #acacac; 
 
} 
 

 
/*subscribe form*/ 
 
.newsletter-form form { 
 
    border-radius: 3em; 
 
    border: 2px solid #aa9146; 
 
    background-color: #000000; 
 
} 
 

 
/*responsive styling*/ 
 
/*iphone */ 
 
@media only screen and (max-width : 1023px) and (min-width : 480px){ 
 
    .contact-bar { 
 
    height: 3em; 
 
    } 
 
    .contact-bar p { 
 
    margin-left: 5%; 
 
    } 
 

 
    .contact-bar p { 
 
    font-size: 2em; 
 
    } 
 
    .contact-bar a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
    } 
 
    .contact-bar a:visited { 
 
    color: #fff; 
 
    } 
 

 
.top-bar { 
 

 
} 
 
    .top-nav { 
 
    float: left; 
 
    } 
 

 
#logo { 
 
    height: 20%; 
 
    width: 20%; 
 
    } 
 

 
    .banner { 
 
    background-color: #fff; 
 
    width: 100%; 
 
    height: 36em; 
 
    } 
 

 
    .exclusive { 
 
    top: 100%; 
 
    background-color: #fff; 
 
    width: 100%; 
 
    z-index: 999; 
 
    align-items: center; 
 
    overflow-x: auto; 
 
    } 
 

 
    .exclusive img { 
 
    width: 98%; 
 
    height: 90%; 
 
    float: left; 
 
    position: relative; 
 
    } 
 

 
    .exclusive img:hover { 
 
    opacity: 0.5; 
 
    } 
 

 
} 
 
/*laptop 1*/ 
 
@media only screen and (max-width : 1366px) and (min-width : 1024px) { 
 
    .top-nav { 
 
    margin-left:15%; 
 
    } 
 

 
    .banner { 
 
    background-color: #fff; 
 
    width: 100%; 
 
    height: 45em; 
 
    } 
 
} 
 

 
/*laptop 2*/ 
 
@media only screen and (max-width : 1024px) and (min-width : 768px) { 
 

 
    } 
 

 
<!--[if lt IE 9]> 
 
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
 
<![endif]-->

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" href="css/style.css"> 
 
    <link rel="icon" href="img/crown.ico" type="image/x-icon" /> 
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans"> 
 
    <title>Jewellery Shop</title> 
 
    </head> 
 

 
    <body> 
 
<div class="contact-bar"> 
 
<table class="phoneemail"> 
 
    <tr> 
 
    <th><img src="img/phone.jpg" alt="" /> 00 11 22 33 44 55 <img src="img/email.jpg" alt="" /> [email protected]<div class="my-account"> 
 
</th> 
 
    <th> 
 
</th> 
 
    </tr> 
 
</table> 
 

 
<table class="myaccount"> 
 
    <tr> 
 
    <th> 
 
     <img src="img/myaccount.jpg" alt=""/> 
 
    </th> 
 
    </tr> 
 
</table> 
 
      </div> 
 
</div> 
 

 

 
<div class="top-bar"> 
 
    <nav class="top-nav"> 
 
    <ul> 
 
     <img id="logo" src="img/logo.jpg" class="logo" alt="" /> 
 
     <li><a href="#" class="nav-item">CONTACT US</a></li> 
 
     <li><a href="#" class="nav-item">BLOG</a></li></a> 
 
     <li><a href="#" class="nav-item">COLLECTIONS</a></li> 
 
     <li><a href="#" class="nav-item">FEATURES</a></li> 
 
     <li><a href="#" class="nav-item">PAGES</a></li> 
 
     <li><a href="#" class="nav-item">HOME</a></li> 
 
     <img src="img/search.jpg" class="search-icon" alt="" /> 
 
     <img src="img/checkout.jpg" class="checkout" alt="" /> 
 
    </ul> 
 
    </nav> 
 
</div> 
 
<div class="banner"> 
 
<img src="img/banner.jpg" alt="" /> 
 
</div> 
 
<!-- exclusive content section --> 
 
<div class="exclusive"> 
 
     <table class="tg" align="center" > 
 
     <tr> 
 
      <th class="tg-baqh"><img src="img/27.jpg" alt="" /></th> 
 
      <th class="tg-baqh" rowspan="2"><img src="img/29.jpg" alt="" /></th> 
 
      <th class="tg-baqh"><img src="img/28.jpg" alt="" /></th> 
 
     </tr> 
 
     <tr> 
 
      <td class="tg-baqh"><img src="img/31.jpg" alt="" /></td> 
 
      <td class="tg-baqh"><img src="img/37.jpg" alt="" /></td> 
 
     </tr> 
 
     </table> 
 

 

 
</div> 
 

 
<div class="royal-banner"> 
 
    <img src="img/royal-banner.jpg" alt="" /> 
 
</div> 
 

 
<div class="rings"> 
 
    <h3>Necklaces | <span style="color: #000; word-spacing: normal;">Diamond Ring</span> | Earrings<br> 
 
    <img class="under" src="img/sub_under.jpg" alt="" /></h3> 
 
<div class="ring-content"> 
 
    <table class="tgg" align="center" border="0px"> 
 
    <tr> 
 
     <th class="tg-a8i3"><img src="img/ring1.jpg" alt="" /></th> 
 
     <th class="tg-i81m" rowspan="3"></th> 
 
     <th class="tg-a8i3"><img src="img/ring2.jpg" alt="" /></th> 
 
     <th class="tg-3we0" rowspan="3"></th> 
 
     <th class="tg-r4y5"><img src="img/ring3.jpg" alt="" /></th> 
 
     <th class="tg-3we0" rowspan="3"></th> 
 
     <th class="tg-r4y5"><img src="img/ring4.jpg" alt="" /></th> 
 
    </tr> 
 
    <tr> 
 
     <td class="tg-r4y5"><h3>PRODUCT NAME</h3><img src="img/ring_linebreak.jpg" alt="" /><h4>$ 5000.00/-</h4></td> 
 
     <td class="tg-r4y5"><h3>PRODUCT NAME</h3><img src="img/ring_linebreak.jpg" alt="" /><h4>$ 5000.00/-</h4></td> 
 
     <td class="tg-r4y5"><h3>PRODUCT NAME</h3><img src="img/ring_linebreak.jpg" alt="" /><h4>$ 5000.00/-</h4></td> 
 
     <td class="tg-r4y5"><h3>PRODUCT NAME</h3><img src="img/ring_linebreak.jpg" alt="" /><h4>$ 5000.00/-</h4></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="tg-r4y5"><input id="addcart" type="submit" value="ADD TO CART" /></td> 
 
     <td class="tg-r4y5"><input id="addcart" type="submit" value="ADD TO CART" /></td> 
 
     <td class="tg-r4y5"><input id="addcart" type="submit" value="ADD TO CART" /></td> 
 
     <td class="tg-r4y5"><input id="addcart" type="submit" value="ADD TO CART" /></td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
</div> 
 

 
<div class="blog"> 
 
    <h3>LATEST BLOGS<br> 
 
    <img class="under" src="img/sub_under_1.jpg" alt="" /></h3> 
 

 
    <table id="blogtable" align="center"> 
 
     <tr> 
 
     <th><img id="blogarrowleft" src="img/blogarrow_left.png" alt="" /></th> 
 
     <th rowspan="3"><img src="img/blog1.jpg" alt="" /><h3>LOREM IPSUM DOLOR SIT AME</h3><p>Lorem ipsum dolor sit amet, consectetur adipsicin elit, do eiusmod temport {...}</p></th> 
 
     <th rowspan="3"><img src="img/blog2.jpg" alt="" /><h3>LOREM IPSUM DOLOR SIT AME</h3><p>Lorem ipsum dolor sit amet, consectetur adipsicin elit, do eiusmod temport {...}</p></th> 
 
     <th rowspan="3"><img src="img/blog3.jpg" alt="" /><h3>LOREM IPSUM DOLOR SIT AME</h3><p>Lorem ipsum dolor sit amet, consectetur adipsicin elit, do eiusmod temport {...}</p></th> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td></td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td><img id="blogarrowright" src="img/blogarrow_right.png" alt="" /> 
 
     </tr> 
 
    </table> 
 
</div> 
 

 

 
<div class="bottom-wrapper"> 
 
    <div class="bottom"> 
 
    <div class="aboutus"> 
 
     <h3>ABOUT US</h3> 
 
     <ul> 
 
     <li><a href="#">My Account</a></li> 
 
     <li><a href="#">Order History</a></li> 
 
     <li><a href="#">Wish List</a></li> 
 
     <li><a href="#">Returns</a></li> 
 
     <li><a href="#">Privacy Policy</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="information"> 
 
     <h3>INFORMATION</h3> 
 
     <ul> 
 
     <li><a href="#">My Account</a></li> 
 
     <li><a href="#">Order History</a></li> 
 
     <li><a href="#">Wish List</a></li> 
 
     <li><a href="#">Returns</a></li> 
 
     <li><a href="#">Privacy Policy</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="ourpolicy"> 
 
     <h3>OUR POLICY</h3> 
 
     <ul> 
 
     <li><a href="#">My Account</a></li> 
 
     <li><a href="#">Order History</a></li> 
 
     <li><a href="#">Wish List</a></li> 
 
     <li><a href="#">Returns</a></li> 
 
     <li><a href="#">Privacy Policy</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="newsletters"> 
 

 
     <h3>GET NEWSLETTERS</h3> 
 

 
     <form action="index.html" method="post" class="newsletter-form"> 
 
      <input type="email" name="email" class="subscribe-input" placeholder="Email address" autofocus> 
 
      <button type="submit" class="subscribe-submit">Subscribe</button> 
 
     </form> 
 

 
<h3>FOLLOW US</h3> 
 
     <a href="#"><img src="img/facebook.jpg" alt="" /></a> 
 
     <a href="#"><img src="img/twitter.jpg" alt="" /></a> 
 
     <a href="#"><img src="img/googleplus.jpg" alt="" /></a> 
 
     <a href="#"><img src="img/linkedin.jpg" alt="" /></a> 
 
    </div> 
 

 
    <div class="bottom-bar"> 
 
    <table align="center"> 
 
     <th rowspan="3"> 
 
     <p><img src="img/contact.jpg" alt="" /><br> 00 11 22 33 44 | 22 33 44 55 66</p> 
 
     </th> 
 
     <th rowspan="3"> 
 
     <p><img src="img/location.jpg" alt="" /><br>Lorem ipsum dolor sit amet, consectetur adipiscling elit, india.</p> 
 
     </th> 
 
     <th rowspan="3"> 
 
     <p><img src="img/emailicon.jpg" alt="" /><br>[email protected]</p> 
 
     </th> 
 
    </table> 
 
</div> 
 
<div class="copyright-bar"> 
 
    <p> 
 
    Copyright © 2016 by <a href="http://www.hghazni.com">hghazni</a> All rights reserved. 
 
    </p> 
 
</div> 
 
    </body> 
 
</html>

來源

2016-10-21 Harry

我看到你的標題都是大寫的。不要手動進行，請查看CSS文本轉換：大寫;使用。 –

對於移動設備，你應該包括響應meta標籤到你的頭上，例如：

<meta name="viewport" content="width=device-width">

但作爲this link建議你應該使用：

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

同樣在this famous和非常齊全的GitHub庫，你可以找到其他有趣的meta標籤也許你應該在你的項目中。

通過添加此標籤給你的網站，你會發現它仍然有一個合適的空間，這是由於你正在使用的<table>。你應該考慮增加一個響應包裝圍繞這些表，以便他們將是可控的，例如引導有一個很好的.table-responsive包裝http://getbootstrap.com/css/#tables-responsive

來源

2016-10-21 01:35:11

請參閱[mcve] –

感謝Lucas和AllDani提供的所有信息都非常有幫助！我很欣賞這一點，所有這些建議將在未來幫助我很多。我現在使用元視口標籤作爲解決方法，使其適合移動屏幕。我想我必須重新考慮我的移動設計戰略。非常感謝！ – Harry

類下吧有一個錯誤的設置，你應該改變成以下，希望它將有所幫助。

.bottom-bar { 
    width: 100%; 
    background-color: #0c0e1b; 
    border-top: 1px solid rgb(255,255,255); 
}

來源

2016-10-21 01:47:51

嘿Chihying謝謝，至少幫我清理了我的代碼！ – Harry

@HaroonGhazni我的榮幸 –

手機上的網站寬度太短（HTML/CSS）

回答

相關問題