我想將媒體查詢應用到博客模板。媒體查詢不能在設備上工作
@media all and (max-width: 600px)
{
//styling here
}
這對我在調整窗口大小時在桌面瀏覽器上正常工作。但是,當我在移動設備(Android,iPhone)上測試它不起作用並顯示桌面版本。 我看過this文章,但沒有什麼幫助。
我想將媒體查詢應用到博客模板。媒體查詢不能在設備上工作
@media all and (max-width: 600px)
{
//styling here
}
這對我在調整窗口大小時在桌面瀏覽器上正常工作。但是,當我在移動設備(Android,iPhone)上測試它不起作用並顯示桌面版本。 我看過this文章,但沒有什麼幫助。
如果您使用的是原版以外的任何iPhone,其寬度爲640像素。現在大多數Android手機都在那裏,如果不是更多。因此,您的max-width: 600px
查詢太窄而無法應用於任何這些電話。
您可以通過增加max-width
參數來更正此問題,以便在包含電話時仍排除桌面。以Twitter Bootstrap的寬度爲移動設備,您應該嘗試max-width: 767px
。
您是否在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
沒有。不是這個。 – grmmph 2013-03-07 15:51:22
似乎在這一點上的時候,你都在提的代碼是不存在到位,有隱藏在y axis.If在所有它有,那麼只有1.你需要更多的媒體查詢更小的寬度。看到我的blogspot site(它是一個自定義域,所以它沒有.blogspot),它有許多媒體查詢寬度更小的寬度不同。
設置max-width
和max-height
爲較小寬度的媒體查詢中的各種元素,你一定會看到它的工作。
只是一個提示:爲了測試,你需要不在安卓/ iOS設備打開你的網站,只要調整窗口大小的桌面上,或者你這個site。
blogspot url plz。 – Michel 2013-03-07 13:44:33
http://grmmphmedia.blogspot.fi/ – grmmph 2013-03-07 13:57:42