Question

问题

Css媒体查询在智能手机和Phablets中运行不佳，但在模拟器中运行良好。问题是媒体查询是未匹配的。例如我的手机屏幕尺寸是320px，但它应用720px css。

也许

由于缺少“（min-device-pixel-ratio：1.5）”而导致出现问题。但我不知道它是什么以及如何使用它..

网站

    @media only screen and (min-width: 480px) and (max-width: 619px)
    @media only screen and (min-width: 320px) and (max-width: 479px)
    @media only screen and (min-width: 250px) and (max-width: 319px)
    @media only screen and (max-width: 249px)

Answer 1

这是您网页的元标记。

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

Answer 2

查看一些媒体查询

http://mediaqueri.es/

Answer 3

如果您没有过多地投入CSS媒体查询，也许可以尝试Restive Plugin。当您构建响应式网站（或为移动设备重新构建桌面网站）时，它会使事情变得更容易一些。

这里有一个“使用入门”指南：http://blog.restive.io/posts/5852603/getting-started-with-restive-plugin，以及与CSS媒体查询的操作比较：http://blog.restive.io/posts/4887492/css-media-queries-vs-restive-plugin

针对您的具体案例的安装和设置将是：

<!-- Install JQuery version 1.7 or higher -->
<script type="text/javascript" src="jquery.min.js"></script>

<!-- Install Restive Plugin -->
<script type="text/javascript" src="restive.min.js"></script>

<!-- Setup Plugin -->
<script>
$( document ).ready(function() {
    $('body').restive({
        breakpoints: ['250', '320', '480', '620', '710', '940'],
        classes: ['rp_250', 'rp_320', 'rp_480', 'rp_620', 'rp_710', 'rp_940'],
        turbo_classes: 'is_mobile=mobi,is_phone=phone,is_tablet=tablet',
        force_dip: true
    });
});
</script>

breakpoints和classes管理您的断点以及对DOM的后续类添加。如上所述，Restive Plugin将创建以下断点范围：0 to 250，251 to 320，321 to 480，481 to 620，621 to 710和{{1} }。然后，当移动设备匹配所述断点时，它将在711 to 940中添加相应的值。

因此，如果classes访问您的网站，iPhone 3GS将添加到rp_320标记的class属性中（因为该设备的视口宽度为320）像素[在portait]）。

<body>是Restive Plugin的一项特殊功能，可以在满足特定条件的情况下为turbo_classes标记添加类。因此，如果设备<body>，它将添加is_mobile，如果设备mobi将添加is_phone，依此类推。您可以从Restive Plugin Docs

获取更深入的信息

phone强制Restive Plugin为force_dip使用与设备无关的像素（默认行为是使用设备像素），以便breakpoints（像素比率为1）和iPhone3GS（像素比率为2）将被相同的断点捕获，即iPhone 4S，这是CSS媒体查询将执行的操作。

因此，通过上述设置，如果设备为251 to 320或mobi phone rp_320，则Restive Plugin会将class添加到<body>标记的iPhone 4S属性中

安装和设置后您执行的所有其他操作都是纯CSS而无需媒体查询。

因此，如果您想为iPhone 3GS断点捕获的设备执行某些操作，只需将其添加到CSS文件即可。菜单栏容器：

251 to 320

这将隐藏属于该断点的任何设备的菜单栏。

然而，你也可以做更广泛的事情，例如隐藏所有手机上的菜单栏容器（这是启用.mobi.rp_320 .menuBarContainer {display: none;}）：

turbo_classes

你也可以为平板电脑做类似的事情：

.mobi.phone .menuBarContainer {display: none;}

您现在可以自由地使用纯CSS构建网站并设置复杂的行为安排，而不必担心.mobi.tablet .menuBarContainer {display: none;}个查询。 Restive Plugin为你做了很多...在errmm ... frontend？！

可能需要习惯不同的思维模式，但在将来构建自适应网站时，它可能会帮助您更灵活。

完全披露：我开发了插件。

Css Media查询无法正常工作

问题

也许

网站

3 个答案: