CSS媒體查詢在手機和桌面上的工作方式不同（寬度相同）
[英]CSS media queries works differently on phone and on desktop (same width)
問題描述
我需要幫助。
我正在個人網站上工作，我想讓它響應（手機，平板電腦，桌面）。 問題是，當我在一個特定分辨率（例如電話）上設置媒體查詢時，它在手機和桌面上的顯示方式不同。 當我將窗口寬度調整為手機寬度時，它不顯示任何問題，它顯示我想要的。 但是，當我使用手機訪問我的頁面時，桌面版本會加載（大版本，甚至不是中等版本的版本）。 我究竟做錯了什么？ 感謝幫助！
這是我第一次處理媒體查詢，所以如果你有任何建議，請寫下來。 謝謝！
<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）-device-width。 我發現它更有用。
1 個解決方案
解決方案1
2 已采納 2014-05-04 21:24:22
嘗試在<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
CSS媒體查詢有關max-width屬性的信息，使平板電腦和台式機的尺寸為1024px
[英]CSS Media Queries regarding max-width property to make 1024px size for Tablet and Desktop
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.