css - 三星 Galaxy Note II 的 CSS 媒体查询

Question

有人可以帮我告诉我用 CSS 媒体查询定位三星 Galaxy Note II 的最佳方法是什么？先感谢您。

score 2 · Accepted Answer

瞄准屏幕分辨率——这样你的规则将适用于多个设备，而不是你必须针对几十个不同的设备。

score 0 · Accepted Answer

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

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

<!DOCTYPE html>

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

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

最后确保你有一个正确的视口元标记。例如，根据 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 技巧文章可以帮助您入门。

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

chrome web 检查器按钮

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

chrome web 检查器 Galaxy Note

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

2 回答 2