我的響應式網站在手機上無法使用

我正在學習HTML，CSS和響應式的基礎知識。我已經爲移動設置了@media查詢，但它不起作用。我的響應式網站在手機上無法使用

但是，如果我從桌面（Chrome）打開網站，我嘗試調整窗口大小，它的工作原理。

HTML

<html> 

    <head> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 

<body> 

    <div class="div1"> 
     <p class="txt">dig</p> 
     <p class="test">- DIG</p> 
     <div class="we"></div> 
    </div> 

    <div class="div2"> 
     <p class="txt">dig</p> 
     <p class="test">Magni</p> 
     <div class="we"></div> 

    </div> 

    <div class="div3"> 
     <p class="txt">dig</p> 
     <p class="test">Grillo</p> 
     <div class="we"></div> 
    </div> 
</body> 

</html>

CSS

body { 
    margin: 0px; 
} 

.div1 { 
    height: 100%; 
    width: 33.3%; 
    background-color: darkgrey; 
    float:left; 
} 

/*.we { 
    height: 200px; 
    width: 50%; 
    background-color: lightcoral; 
    margin-left: 165px; 
}*/ 

.div2 { 
    height: 100%; 
    width: 33.3%; 
    background-color: darkslategray; 
    float:left; 
} 

.div3 { 
    height: 100%; 
    width: 33.3%; 
    background-color: darkorange; 
    float:left; 
} 

.txt { 
    text-align: center; 
    color: black; 
    font-size: 100; 
    padding-top: 50%; 
} 

.test { 
    text-align: center; 
    font-size: 50; 
    color: antiquewhite; 
} 


/* - - - - - - - - - - - - - - - - - - - */ 

@media screen 
    and (max-width: 320px) 
    and (orientation: portrait) { 

    body { 
     margin: 0px; 
    } 

    .div1 { 
     height: 500px; 
     width: 100%; 
     background-color: darkgrey; 

} 

    .div2 { 
     height: 500px; 
     width: 100%; 
     background-color: darkslategrey; 

} 

    .div3 { 
     height: 500px; 
     width: 100%; 
     background-color: darkorange; 

} 

    .txt { 
     text-align: center; 
     color: black; 
     font-size: 50; 
     padding-top: 25%; 
} 

    .test { 
     text-align: center; 
     font-size: 25; 
     color: antiquewhite; 

} 

}

如果你想測試你可以去：sinh.altervista.org

我怎樣才能解決這個問題？什麼是每個設備的真正媒體查詢？在網上我發現了很多不同的@media查詢。

來源

2017-02-19 dig

你必須指定如何您的文檔應該用meta標籤viewport呈現head標籤內。

例如：

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, user-scalable=yes, minimal-ui"> 
    <link rel="stylesheet" type="text/css" href="style.css">  
    </head>

注意：上面的例子是詳盡的，你的情況<meta name="viewport" content="width=device-width, initial-scale=1">應該足夠了，但如果你要管理縮放，用戶比例等可以添加這些屬性...

width=device-width作用：

這意味着，瀏覽器將（可能）呈現的寬度頁面在其自己的屏幕寬度。

從這裏取：https://css-tricks.com/snippets/html/responsive-meta-tag/

和initial-scale=1將離開變焦在1

來自W3C的草案比，這裏有屬性的content屬性，你可以使用：https://drafts.csswg.org/css-device-adapt/#meta-properties 。

還有一些來自MDN的文檔：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

來源

2017-02-19 11:37:57

我的響應式網站在手機上無法使用

回答

相關問題