三星 Galaxy Note II 的 CSS 媒体查询答案

【问题标题】：CSS Media Query for Samsung Galaxy Note II三星 Galaxy Note II 的 CSS 媒体查询
【发布时间】：2013-02-15 19:06:54
【问题描述】：

谁能帮我告诉我用 CSS 媒体查询定位三星 Galaxy Note II 的最佳方法是什么？提前谢谢你。

【问题讨论】：

【解决方案1】：

您通常不会针对特定设备。相反，您可以为视口宽度或设备宽度指定规则。第一步是确保您的 html 设置正确。

我知道如果不指定文档类型，javascript 中的 window 元素不会获得内部宽度。这会弄乱 css 中的媒体查询，因此请指定它。

<!DOCTYPE html>

根据 W3C 规范添加一个特定于微软的标签，意思是“最近的一切”。否则 Windows Phone 浏览器可能会搞砸。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

最后确保你有一个正确的视口元标记。例如according to wikipedia Galaxy Note II 有3 subpixels/pixel。这意味着页面将呈现为屏幕宽度的 3 倍，用户一次只能看到页面的 1/3，并且需要水平滚动。

<head> 中的以下元标记修复了这个问题。

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

以上都是HTML 5 Boilerplate的一部分。如有疑问，请从那里开始。

在您的 CSS 中，您可以根据设备的宽度和高度指定媒体查询。通常你只关心宽度，但你也可以为设备的宽度和高度定制规则。

@media screen and (max-width: 800px) {
    /* rules here */
    .sidebar { display: none; }
}

根据我的经验，媒体查询中的规则具有优先权。在设备尺寸上有一个CSS Tricks article 可以开始使用。

为了测试它是否有效，Chrome 和 Firefox 开发工具都有适用于流行设备的模拟器。例如在 Chrome 中，打开开发工具并点击电话图标。

然后选择你想要的设备并使用 css 查询直到它看起来不错。

我已经剪掉了图像，但标题清楚地呈现正确。

【讨论】：

【解决方案2】：

以屏幕分辨率为目标 - 这样您的规则将适用于多个设备，而不是您必须针对几十个不同的设备。

【讨论】：