移动 HTML5 应用的媒体查询答案

【问题标题】：Media queries for a mobile HTML5 app移动 HTML5 应用的媒体查询
【发布时间】：2013-08-24 11:57:11
【问题描述】：

我基本上已经疯了，试图弄清楚/谷歌它。 iOS 设备不是问题，因为数量不多，而且每台设备都易于设置，但 android 和可能的 BlackBerry 也加入了游戏......

基本上我有 4 种尺寸（S、M、L、XL）的 CSS，但后来出现了一款像“HTC One”这样的手机，它具有全高清 (1920x1080) 和 4.7 英寸......我如何计算这个?有没有像覆盖大多数框架的框架。 HJ如何处理这个？我如何覆盖大多数设备？

干杯，克

【问题讨论】：

您可以在媒体查询中使用-webkit-min-device-pixel-ratio 和min-resolution 来定位高分辨率设备。见这里：bjango.com/articles/min-device-pixel-ratio
您可以在这里找到您问题的充分答案：stackoverflow.com/questions/16490175/…

标签： css html cordova responsive-design media-queries

【解决方案1】：

我了解你，卡灵顿，

不要处理其他复杂的即时 CSS 和 JS 文件。您可以根据需要制作自己的网站。

使用这些媒体查询：

Media Queries for Web Design

并设计您的网站。

然后在此链接上逐步检查您的流程：

Test your Responsive Web Design

这是我用这两个链接在一天内设计的网页：

Lottery Query for Turkish People

希望这两个链接对你有所帮助。

【讨论】：

【解决方案2】：

可能用JavaScript检测浏览器，然后用devicePixelRatio判断屏幕分辨率？

或者，您可以只使用媒体查询来实现您想要的？

CSS Tricks
Marc Edwards github 来自 device pixel density tests 帖子，Teo 在上面的评论中也提到了。

【讨论】：

【解决方案3】：

好吧，我认为为每种尺寸的屏幕创建一个特殊的 css 样式表并不完全符合“响应式设计”therms。然后，您应该首先根据最大的屏幕为您的网站创建一个 CSS，或者从最小的屏幕开始（移动优先），您的网站将用于该屏幕。然后你只需要像这样在你的 CSS 中添加一个 媒体查询 块： @media all and (max-width: *Size of screen*px) { *Your css here* } 每次他看起来怪异或制服时更改一个元素。

通过这个技巧，还可以使用 viewport 元标记 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 它将为用户禁用缩放并自动调整窗口以在每个屏幕上完美适应您的网站（甚至是智能手机）。

我什至不知道它是否真的可以帮助你，但我认为重要的是要标记为特定尺寸制作特定样式表确实不是好方法，因为 有一百万种不同的屏幕尺寸。

那么您也可以使用 css 网格，例如 960 Grid System 或 Twitter Bootstrap。

【讨论】：

+1 提到了 Twitter Bootstrap 和 960 Grid System，最好依赖 CSS 框架而不是自己构建。我宁愿 not 去你的第一段。至于第二段，最好不要提到最大比例，这样用户可以在出于某种原因需要更大的文本时放大。初始规模是必须的

【解决方案4】：

在您的媒体查询中，您可以使用max-device-width 而不是max-width。 max-width 将针对支持媒体查询的任何内容，但max-device-width 将基于屏幕而不是窗口。 “描述输出设备的宽度（指整个屏幕或页面，而不仅仅是渲染区域，比如文档窗口）。” *来源：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

@media all and (max-device-width:1920px){
 /* this will target any device up to 1920px */
}

或者如果你知道分辨率，你可以将它们组合起来：

@media screen and (min-resolution: 2dppx) and (max-device-width:1920px) { ... }

【讨论】：

【解决方案5】：

嗯，我可以说我个人处理这件事的方式是这样的：

<link rel="stylesheet" href="./css/base.css" type="text/css" media="all">
<link rel="stylesheet" href="./css/720_grid.css" type="text/css" media="screen and (min-width: 720px)">
<link rel="stylesheet" href="./css/986_grid.css" type="text/css" media="screen and (min-width: 986px)">
<link rel="stylesheet" href="./css/1236_grid.css" media="screen and (min-width: 1236px)" >

所以我基本上有三个 CSS 文件，根据屏幕的宽度，每个都是自动加载的。最后一个适用于任何 1236 或更高版本。

这是你要找的……还是我错过了你要问的？

【讨论】：

您好，感谢您的评论，但我需要的是同时具有屏幕尺寸和 DPI 的移动设备...我认为此解决方案仅适用于具有相似 DPI 的桌面屏幕。就像我在上面所说的“但随后出现了一款像“HTC One”这样具有全高清（1920x1080）和4.7英寸的手机”，在你的例子中，如果他使用“1236_grid.css”，他会得到非常小的元素...... .
@Charlie74：这是使用媒体查询的一种非常糟糕的方式！首先，因为将您的样式分隔在不同的文件中会导致额外的请求，因为浏览器将加载所有 CSS 文件（不仅是与其规则匹配的那个）。其次，仅使用 min-width 会导致应用（和覆盖）所有样式，这可能会导致浏览器在您的情况下最多重新渲染页面四次。绝对应该避免这两件事，尤其是对于移动设备！最后但并非最不重要的一点是，媒体查询规则应该使用 EM 而不是像素。
@Charlie74 和 Netsurfer。媒体查询可以在标头中使用，因此只加载一个 css 文件。调整浏览器窗口大小时有一个缺点，但除了开发人员检查网站的响应性之外，他们会多次这样做。