填充內容100％寬度的較小分辨率/移動

Question

您好我目前正在一個網站，它設置爲模仿100％的瀏覽器寬度。但是，在移動設備上，內容不佔用瀏覽器的整個寬度，也不佔用較小的分辨率。我已經爲所有不同的設備嘗試了@媒體屏幕輸入以適應頭腦寬度，並且它似乎不起作用。

body, html { 
    width: 100%; 
    height: 100%; 
    background:url(images/bg.jpg); 
} 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    margin: 0; 
    padding: 0; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, q:before, q:after { 
    content: none; 
} 
:focus { 
    outline: 0; 
} 
del { 
    text-decoration: line-through; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 
.fl { 
    float: left; 
} 
.fr { 
    float: right; 
} 
.ac { 
    text-align: center; 
} 
.ar { 
    text-align: right; 
} 
.col-full:after { 
    content:"."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
h1 { 
    font-size: 2em; 
} 
h2 { 
    font-size: 1.8em; 
} 
h3 { 
    font-size: 1.6em; 
} 
h4 { 
    font-size: 1.2em; 
} 
h5 { 
    font-size: 1em; 
} 
h6 { 
    font-size: .8em; 
} 
p { 
    margin: 0; 
} 
hr { 
    background-color: #e6e6e6; 
    border: 0; 
    height: 1px; 
} 
input, textarea { 
    padding: 5px; 
    border-width: 1px; 
    border-style: solid; 
    border-radius: 3px; 
    color: #222; 
} 
a { 
    color: #222; 
    text-decoration: none; 
} 
h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { 
    text-decoration: none; 
} 
#main { 
    width: 100%; 
} 
#main.col-full, .layout-full #main, .col-full, #main.fullwidth { 
    width: 100%; 
    margin: 25px 50px; 
} 
.nav { 
    list-style: none; 
    font: normal 3em Futura, sans-serif; 
    color: #222; 
} 
.nav a { 
    color:#222; 
    line-height:2.75em; 
    padding-left:25px; 
} 
.nav ul li { 
    float: left; 
} 
.nav a:hover { 
    color: #029b9d; 
} 
.toggleBtn { 
    display : block; 
    cursor : pointer; 
    margin:0; 
} 
.toggleBtn:hover { 
    color : #dd2591; 
    transition : all 0.5s ease; 
} 
.below { 
    background : #f5f5f5; 
    width : 100% position : relative; 
    height : 100%; 
    overflow : hidden; 
    opacity : 0.949999988079071044921875 
} 
#header { 
    width:100%; 
    position: relative; 
} 
.logo { 
    float: left; 
    width:300px; 
    height:110px; 
    background:url(images/logo.png); 
} 
#footer-container { 
    width: 100%; 
    margin: 25px 50px; 
    font: normal 1em Futura, sans-serif; 
} 
.advent { 
    float: left; 
    display: block; 
    height: 350px; 
    width: 610px; 
    background:#222; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    transition: all 1s ease; 
} 
.one { 
    background:url(images/1.jpg); 
} 





<div class="col-full"></div> 
<div id="header" class="col-full"> 
<div class="clear"></div> 
<div class="logo"></div> 
<div class="nav"> 
<ul> 
<li><a class="toggleBtn">home</li></a> 
<li><a class="toggleBtn">collaborate</a></li> 
<li><a class="toggleBtn">connect</a></li> 
</ul>     
</div> 
<div class="below"> 
           <h2>Camera/Sound</h2> 

           <p><strong>Responsibilites at 
           WG206?</strong><br /> 
           I direct and coordinate WG206 Episodes.<br /> 
           <br /> 
           <strong>Favorite WG206 moment?</strong> CHS 
           2012 Youth Camp<br /> 
           <br /> 
           <strong>Future plans?</strong><br /> 
           Keep making awesome episodes.</p> 

           <div class="smc"> 
            <a class="fb" href="#"></a> <a class="tw" 
            href="#"></a> 
           </div> 
</div> 
<!-- /#header --></div> 
<div id="main" class="col-full"> 
<div class="advent one"></div> 
<div class="advent one"></div> 
<div class="advent one "></div> 
<div class="advent one"></div> 
<div class="advent one"></div> 
<div class="advent one"></div> 
<div class="advent one"></div> 
<div class="advent one"></div> 
<div class="advent one"></div> 
<!-- /#main --> 
</body> 
</html> 

Answer 1

我目前涉足的響應CSS和我在做我的@media查詢他們沒有工作，直到我說：在<head>標籤之間

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

還要確保它@media屏幕不@媒體屏幕

例子：

@media screen and (max-width: 480px) 
{   
    .header .user-bar { 
     display:none; 
    } 
}