在应用程序中，我使用媒体查询使页面移动友好且响应迅速。 使用的文档类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在标题中包含元标记
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width;user-scalable=no" />
包含的 CSS
<link rel="stylesheet" type="text/css" href="MBE-MOBILE.css" th:href="@{'MBE-MOBILE.css.css'}"/>
使用的媒体查询
@media screen and (min-width:300px) {
.heading-text{
font-size: 20px;
color:red;
}
}
@media screen and (min-width:480px) {
.heading-text{
font-size: 30px;
color:green;
}
}
@media screen and (min-width:640px) {
.heading-text{
font-size: 35px;
color:blue;
}
}
在网络浏览器中，这工作正常。但在某些移动浏览器中，媒体查询无法正常工作。
EG:对于分辨率为 1080 x 1920 像素的 Sony Experia，浏览器采用最小宽度 320 而不是 640 像素。
任何人都可以指导我解决这个问题的媒体查询的确切用法。任何帮助将不胜感激。
最佳答案
取决于您的 Sony Xperia，真的。
This is a related question .将其视为 Xperia Z 或 Z1，您可以使用:
@media screen and (-webkit-device-pixel-ratio:3) {styles}
想想较新的 iPhone，它们的 CSS 像素比率为 2，因此它们的宽度实际上是 640px，但是使用 initial-scale=1.0 我们通过使用 320px 来定位它。 Xperia Z 或 Z1 将具有 1080/3，这意味着它是 360 像素的@media 屏幕的目标。
编辑:您可以使用以逗号分隔的媒体查询列表，因此即使您的媒体查询到位了 640 像素，您也可以包括其他:
@media screen and (min-width:640px), screen and (-webkit-device-pixel-ratio: 3) {styles}
这允许您保持初始比例，甚至支持具有 1920 像素分辨率和像素比 3 的 Nexus 平板电脑
关于html - CSS 媒体查询无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23869883/