请在此处查看我的网站 www.andrewtanner.me/dev
基本上，我只是从媒体查询开始。除了移动设备(平板电脑、智能手机)之外，没有我想要定位的特定设备。该网站在移动设备上呈现得很好，所以它实际上只是针对移动设备进行优化的一个案例(最终我想看看大而厚实的触摸按钮和通常更友好的触摸体验)。该网站仅供我个人使用，实际上只是我自己的 Playground 。
到目前为止，我的代码非常基础，像素值是任意的。
@media (max-width: 480px) {
#container {display: none}
“容器”ID 包含 CSS 和 JavaScript/jQuery 的混合体，用于呈现交互式背景。
当我在桌面(使用 Chrome)上调整浏览器窗口大小时，它按预期工作，背景消失了。但是，当在移动设备(同时使用 Chrome 和标准浏览器的 Galaxy S4)上查看时，背景仍然可见。我很确定这是因为现代智能手机的 PPI 与笔记本电脑/台式机屏幕一样好，甚至更好。当然，像素是一个相对值，但我是可以用于媒体查询的像素比元素，但我已经尝试过但无济于事(包括浏览器引擎)。
我想知道如何解决这个问题，并进一步了解如何最好地在移动设备上呈现特定的 CSS。我显然遗漏了一些东西，虽然我也许可以从其他地方获取代码并对其进行修改 - 这并不能真正满足我的好奇心)。
谢谢
安德鲁
最佳答案
您可能需要添加元标记来定义视口(viewport)的宽度。尝试将以下内容添加到文档的 head 中，如果媒体查询在您的移动设备上得到遵守，请告诉我:
<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0">
关于css - 从 CSS 媒体查询开始，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18558986/