CSS媒體查詢在電話和桌面上的工作方式不同（相同寬度）

我需要幫助。CSS媒體查詢在電話和桌面上的工作方式不同（相同寬度）

我正在一個個人網站上工作，我想讓它響應（手機，平板電腦，桌面）。問題是，當我在某個特定分辨率（例如手機）上設置媒體查詢時，它在手機和桌面上顯示不同。當我將窗口寬度調整爲手機寬度時，它不顯示任何問題，並顯示爲我想要的。但是當我用我的手機訪問我的頁面時，桌面版會加載（大的，甚至不是中等的）。我究竟做錯了什麼？感謝幫助！

這是我第一次與媒體查詢工作，所以如果你有任何建議，請寫下來。謝謝！

<link rel="stylesheet" type="text/css" media="screen and (min-width:0px) and (max-width: 480px)" href="css/small.css"> 
<link rel="stylesheet" type="text/css" media="screen and (min-width:481px) and (max-width: 1000px)" href="css/medium.css"> 
<link rel="stylesheet" type="text/css" media="screen and (min-width:1001px)" href="css/large.css">

此外我想使用min（max）-width，而不是min（max） - 設備寬度。我覺得這樣更有用。

Here it is online

來源

2014-05-04 NEXGmR

問題是，最小寬度和最大寬度不會給你想要的結果，因爲現代智能手機只是呈現1200像素寬的主容器。所以min-width和max-width總是與1200px進行比較。 – sebastian

謝謝sebastian，元標記工作！現在顯示它應該。 – NEXGmR

嘗試設置內部<head></head>寬度：

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

或使用媒體查詢像這樣的：min-device-width : 481px代替device-width : 481px

來源

2014-05-04 21:24:22 sebastian

您必須修復視口大小，正如@sebastian所說。在桌面瀏覽器上，視口是窗口大小。在移動設備上不同，視口將大於實際屏幕尺寸。它允許網站在使用縮放的小型設備上正常工作。因此，如果沒有視口meta，您的手機會說「我有一個很大的視口，所以我將該網站顯示爲桌面應用程序」 – Nono

CSS媒體查詢在電話和桌面上的工作方式不同（相同寬度）

回答

相關問題