与CSS媒体开始了查询

请看这里www.andrewtanner.me/dev我的网站与CSS媒体开始了查询

基本上，我刚刚开始使用媒体查询。除了移动设备（平板电脑，智能手机）之外，我还没有特定的设备。该网站在移动设备上表现不错，因此它只是针对移动设备进行优化的一种情况（最终我希望看到大块的触摸按钮以及通常更友好的触摸体验）。该网站只是为了我自己的私人利益，而且真的只是我自己的一个操场。

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

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

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

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

我想知道如何解决这个问题，并学习更多关于如何在移动设备上呈现特定的CSS。我显然错过了一些东西，虽然我可能只是从别处获取代码并对其进行修改 - 这并不能真正满足我的好奇心）。

感谢

安德鲁

来源

2013-09-01 Andrew David Tanner

您可能需要添加meta标签来定义视口的宽度。尝试添加以下到您的文档的head，让我知道如果媒体查询您的移动设备上的尊重：

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

来源

2013-09-01 14:00:32 JWK

我补充说，和它的工作，谢谢。 –

尝试增加这头部分：

<!-- 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">

来源

2013-09-01 14:05:29

干杯队友 - 添加了视口标签。我已经将尺寸设置为等于我的S4，并且我也在iOS上测试过它，并且它工作正常。另外两个标签是关于什么的？ –

'MobileOptimized'是Windows专有的元标记，'HandheldFriendly'用于支持旧设备。这两种方法都是针对移动设备进行优化时推荐的，但“视口”是解决S4问题所需的全部功能。道具马特建议这些虽然。 – JWK

与CSS媒体开始了查询

回答

相关问题