網頁響應移動視圖

Question

我有一個網站，必須響應手機。我用我的桌面創建了它。

當我調整瀏覽器窗口時，它運行的很好，但是當我在手機（Microsoft-640）上查看它時，它似乎不響應移動視圖。

Answer 1

請你能爲響應添加meta標籤視作爲下：

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

Answer 2

這將有助於使你的網站，通過自己的手機查看。

CSS3中的媒體查詢採用了這個想法並對其進行了擴展。他們不是在尋找一種設備，而是尋找設備的功能，並且可以使用它來檢查各種事物。

例如：

• 寬度和高度（在瀏覽器窗口）
• 裝置的寬度和高度
• 方向 - 例如在橫向或縱向模式電話？
• 分辨率

鏈接使用介質的單獨的樣式表查詢

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" /> 

使用媒體查詢第一種方法是讓CSS的替代部分就在您的單一樣式表中。因此，要針對小型設備

我們可以使用下面的語法：

@media only screen and (max-device-width: 480px) { 

} 

示例代碼：

@media only screen and (max-device-width: 480px) { 
    div#wrapper { 
     width: 400px; 
    } 

    div#header { 
     background-image: url(media-queries-phone.jpg); 
     height: 93px; 
     position: relative; 
    } 

    div#header h1 { 
     font-size: 140%; 
    } 

    #content { 
     float: none; 
     width: 100%; 
    } 

    #navigation { 
     float:none; 
     width: auto; 
    } 
} 

對於一些參考：1 click me please，2 click me too