CSS媒體查詢無法正常工作（佈局在手機上縮小）

我在我的網站中使用媒體查詢進行響應式佈局。現在我試圖使用視口寬度爲320px的設備。下面是它在我的CSS代碼：CSS媒體查詢無法正常工作（佈局在手機上縮小）

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 

#wrapper,#white-board,#content { 
width:400px; 
} 
#slot { 
width:370px; 
} 

#logo { 
width:100px; 
} 
#top-bar-content,#nav-bar-tile,#card,#fourth-box, 
#eighth-box-wrapper,#eighth-box,#ninth-box-wrapper, 
#ninth-box,#seventh-box-wrapper,#seventh-box,#fifth-sixth,#sixth-box,#ad_long ,#sidebar { 
display:none; 
} 

}

這是它的外觀：

這是它的外觀，當我放大，這就是我到底要佈局是：

來源

2015-10-13 Brainy Prb

添加<meta name="viewport" content="initial-scale=1.0">的頭部

來源

2015-10-13 11:49:11

是現在的工作，但現在我得到了大量的空間，右側的垂直滾動，這是爲什麼？我的身體內容非常適合屏幕，仍然有垂直滾動。 –

會添加一個屏幕快照來看看發生了什麼？ –

我忘了調整我的頁腳大小，以便爲我提供一些垂直滾動空間。問題解決了非常感謝您的時間，玩得開心:) –

嘗試在您添加視口元：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

來源

2015-10-13 11:51:08 lddz

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

來源

2015-10-13 11:52:28

如果不適用於移動設備或鍍鉻。即使你嘗試這個東西宣佈媒體CSS支持所有屏幕，如移動，iPad和桌面 @media屏幕和（最大寬度：1024px） –

CSS媒體查詢無法正常工作（佈局在手機上縮小）

回答

相關問題