2013-03-19 113 views
5

所以我有一个有趣的困境,我在一个响应式网站上工作,当我调整我的浏览器的大小时,它的工作原理应该如此,但是当我从我的iphone上查看该网站时,它并没有抓住从相应的媒体查询的查询,这是我定义为:手机无法识别媒体查询

@media (max-width: 479px) { 
    rules 
} 

该网站ericbrockmanwebsites.com/dev2想知道是否有人遇到过这一点。

任何帮助,非常感谢。

+0

您可能只需要调整值。你见过这个吗? http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ – xec 2013-03-19 11:58:18

+1

这也是一个很好的阅读:https://developer.mozilla.org/en-US/docs/Mobile/ Viewport_meta_tag – xec 2013-03-19 12:01:12

回答

10

您需要在头脑中包含<meta name="viewport" content="width=device-width, initial-scale=1">才能让您的移动设备尊重您的媒体查询。

+0

很好的疑难解答 – 2013-03-19 12:16:45

+0

我也无法让移动设备使用我设置的媒体查询。这解决了这个问题。谢谢! – Pea 2014-07-10 16:44:54

0

在某些情况下,在移动延伸超出主体或页包装纸的宽度的图像,简单地将

<meta name="viewport" content="width=device-width, initial-scale=0">

在头部可以调整人体为中心。