媒體查詢不能在設備上工作

我想將媒體查詢應用到博客模板。媒體查詢不能在設備上工作

@media all and (max-width: 600px) 
    { 
    //styling here 
    }

這對我在調整窗口大小時在桌面瀏覽器上正常工作。但是，當我在移動設備（Android，iPhone）上測試它不起作用並顯示桌面版本。我看過this文章，但沒有什麼幫助。

來源

2013-03-07 grmmph

blogspot url plz。 – Michel 2013-03-07 13:44:33

http://grmmphmedia.blogspot.fi/ – grmmph 2013-03-07 13:57:42

如果您使用的是原版以外的任何iPhone，其寬度爲640像素。現在大多數Android手機都在那裏，如果不是更多。因此，您的max-width: 600px查詢太窄而無法應用於任何這些電話。

您可以通過增加max-width參數來更正此問題，以便在包含電話時仍排除桌面。以Twitter Bootstrap的寬度爲移動設備，您應該嘗試max-width: 767px。

來源

2013-03-07 13:44:34 jmeas

對不起，不是。嘗試用767px。測試Galaxy II和iPhone。相同的結果 – grmmph 2013-03-07 13:56:03

製作[JSFiddle]（http://jsfiddle.net）？ – jmeas 2013-03-07 13:57:08

我有這一切：http://grmmphmedia.blogspot.fi/它適用於我爲iPhone指定它@media（-webkit-min-device-pixel-ratio：2）和（max-device-width： 480px）{}' – grmmph 2013-03-07 14:28:37

您是否在html中指定了viewport。爲了使樣式呈現，您將需要它。

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

你可以閱讀一下：https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

來源

2013-03-07 14:24:14 ashley

沒有。不是這個。 – grmmph 2013-03-07 15:51:22

似乎在這一點上的時候，你都在提的代碼是不存在到位，有隱藏在y axis.If在所有它有，那麼只有1.你需要更多的媒體查詢更小的寬度。看到我的blogspot site（它是一個自定義域，所以它沒有.blogspot），它有許多媒體查詢寬度更小的寬度不同。

設置max-width和max-height爲較小寬度的媒體查詢中的各種元素，你一定會看到它的工作。

只是一個提示：爲了測試，你需要不在安卓/ iOS設備打開你的網站，只要調整窗口大小的桌面上，或者你這個site。

來源

2013-03-07 16:41:09 Michel

媒體查詢不能在設備上工作

回答

相關問題