从 CSS 媒体查询开始答案

【问题标题】：Starting out with CSS media queries从 CSS 媒体查询开始
【发布时间】：2013-09-01 13:40:39
【问题描述】：

请在此处查看我的网站 www.andrewtanner.me/dev

基本上，我只是从媒体查询开始。除了移动设备（平板电脑、智能手机）之外，我没有想要定位的特定设备。该网站在移动设备上呈现良好，因此它实际上只是针对移动设备进行优化的一个案例（最终我想看看大块的触摸按钮，通常是更友好的触摸体验）。该网站只是为了我个人的利益，实际上只是我自己的游乐场。

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

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

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

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

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

谢谢

安德鲁

【问题讨论】：

标签： css media-queries tablet smartphone

【解决方案1】：

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

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

【讨论】：

【解决方案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">

【讨论】：

干杯伙伴 - 添加了视口标签。我已将尺寸设置为与我的 S4 相同，并且我还在 iOS 上对其进行了测试，它工作正常。另外两个标签具体是关于什么的？
MobileOptimized 是 Windows 专有的元标记，HandheldFriendly 用于支持旧设备。在针对移动设备进行优化时，也建议使用这两种方法，但 viewport 是解决 S4 问题所需要的全部。向马特提出建议的道具。