Question

有人可以帮我告诉我哪个是使用CSS媒体查询定位三星Galaxy Note II的最佳方法吗？提前谢谢。

Answer 1

旨在定位屏幕分辨率 - 这样您的规则将适用于多个设备，而不是您必须定位数十种不同的设备。

Answer 2

您通常不会定位特定设备。而是为视口宽度或设备宽度指定规则。第一步是确保您的html设置正确。

我知道没有指定doctype，javascript中的window元素没有内部宽度。这会搞乱css中的媒体查询，所以请指定它。

<!DOCTYPE html>

添加特定于微软的标签，意味着＆＃34;最新的一切＆＃34;关于遵循W3C规范。否则，Windows手机浏览器可能会搞砸了。

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

最后确保您有一个正确的视口元标记。例如，according to wikipedia Galaxy Note II有3 subpixels/pixel。这意味着页面的渲染幅度是屏幕的3倍，用户一次只能看到1/3的页面，需要滚动horizontall。

<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中，打开开发工具，然后点击手机图标。

chrome web inspector button

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

chrome web inspector galaxy note

我已经切断了图像，但标题清晰正确。