从CSS媒体查询开始
从CSS媒体查询开始
提问于 2013-09-01 13:40:39
请访问我的网站:www.andrewtaner.me/dev
基本上，我只是从媒体查询开始。除了移动设备(平板电脑、智能手机)之外，我不想专门针对其他设备。该网站在手机上表现良好，因此它实际上只是一个为移动优化的案例(最终，我想看看大而笨重的触摸按钮，以及更友好的触摸体验)。这个网站只是为了我个人的利益，而且真的只是我自己的一个游乐场。
到目前为止，我的代码是非常基本的，像素值是任意的。
@media (max-width: 480px) {
#container {display: none}“容器”ID包含CSS和JavaScript/jQuery的混合，用于呈现交互式背景。
当我调整桌面上浏览器窗口的大小(使用Chrome)时，它会像预期的那样工作，背景就会消失。然而，在移动设备(使用Chrome和普通浏览器的Galaxy S4 )上查看时，背景仍然是可见的。我很确定这是因为现代智能手机的PPI和笔记本电脑/台式机一样好，甚至更好。当然，像素是一个相对值，但我是像素比元素，可以用于媒体查询，但我尝试了这一点，但没有效果(包括浏览器引擎)。
我想知道如何解决这个问题，并且更多地了解如何在移动设备上呈现特定的CSS。我显然遗漏了一些东西，也许我可以从其他地方获取代码并对其进行修改--这并不能满足我的好奇心)。
谢谢
安德鲁
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-09-01 14:00:32
您可能需要添加元标记来定义视口的宽度。尝试将以下内容添加到文档的head中，并让我知道在移动设备上是否尊重媒体查询：
<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0">Stack Overflow用户
发布于 2013-09-01 14:05:29
尝试将此添加到head部分：
<!-- 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"> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18558986
复制相关文章
相似问题
腾讯云开发者
