如何獲得100％的div來完全覆蓋帶有元視口的頁面寬度「width = device-width」

Question

所以我想讓我的網站適應移動瀏覽器。我有2個CSS文件，其中一個總是包含一個和與

media="screen and (max-width:500px)" 

爲了得到那個工作，我使用的meta標籤

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

這個偉大的工程SA長的內容 - 包裝div具有固定寬度，或者如果屏幕寬度小於500px。但是當我翻動我的手機（並因此獲得> 500px寬度）時，直接將身體寬度設置爲100％的div切斷。我假設因爲寬度=設備寬度使css 100％等於屏幕寬度，即使網站大於屏幕。

在桌面瀏覽器正確（背景意在覆蓋整個文檔寬度）：

在（翻轉）電話或移動鉻仿真。一大塊菜單被切掉。

CSS：

#top{ 
    position:relative; 
    background:rgba(191,186,130,1); 
    height:150px; 
    width:100%; 
    overflow:visible; 
} 

有沒有什麼辦法可以使寬度的div橫跨整個文檔？我是否需要javascript來檢測這個？

Answer 1

設置你的初始規模等於1

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