Question

请访问我的网站www.andrewtanner.me/dev

基本上，我刚刚开始使用媒体查询。除了移动设备（平板电脑，智能手机）之外，我还没有其他特定的设备。该网站在移动设备上呈现得很好，因此它实际上仅仅是针对移动设备进行优化的一个案例（最终我想要看一下大块的触摸按键以及通常更友好的触摸体验）。该网站仅供我个人使用，实际上只是我自己的游乐场。

到目前为止，我的代码非常基本，像素值是任意的。

@media (max-width: 480px) {
#container {display: none}

'容器'ID包含CSS和JavaScript / jQuery的混合，用于呈现交互式背景。

当我在桌面上调整浏览器窗口大小（使用Chrome）时，它按预期工作，背景消失。但是，在移动设备上查看（使用Chrome和股票浏览器的Galaxy S4）时，背景仍然可见。我很确定这是因为现代智能手机的PPI与笔记本电脑/台式机屏幕一样好，甚至更好。当然，像素是一个相对值，但我是可用于媒体查询的像素比元素，但我试过这个但是无济于事（以及包括浏览器引擎）。

我想知道如何解决这个问题，并且还要了解如何最好地在移动设备上呈现特定的CSS。我显然遗漏了一些东西，而我可能只是从其他地方获取代码并修改它 - 这并不能真正满足我的好奇心。）

由于

安德鲁

Answer 1

您可能需要添加元标记以定义视口的宽度。尝试将以下内容添加到文档的head，并告知我们您的移动设备是否遵守了媒体查询：

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

Answer 2

尝试将其添加到头部：

<!-- Mobile Specific Metas -->
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

从CSS媒体查询开始

2 个答案: