Question

在应用程序中使用媒体查询使页面移动友好且响应迅速。使用的文档类型

<!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：对于Sony Experia，其分辨率为1080 x 1920像素，浏览器采用最小宽度320而不是640像素。

任何机构都可以指导我解决此问题的媒体查询的确切用法。非常感谢。

Answer 1

真的取决于您的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，这意味着它的目标是@media屏幕为360px。

编辑：您可以使用以逗号分隔的媒体查询列表，因此即使您的媒体查询适用于640像素，您也可以包含另一个：

@media screen and (min-width:640px), screen and (-webkit-device-pixel-ratio: 3) {styles}

这使您可以保持初始比例，甚至支持1920 xx分辨率和像素比率3的Nexus平板电脑

CSS Media查询无法正常工作

1 个答案: