媒體查詢不工作在移動，但在桌面上它的偉大工程

Question

HTML頭戴式

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

CSS媒體查詢 -

@media handheld, screen 
    and (min-width: 200px) 
    and (max-width: 399px){} 

Answer 1

我不知道爲什麼你使用手持..我只是發佈我的答案媒體查詢移動。

@media only screen and (min-width:300px) and (max-width :399px) { }

Answer 2

首先，handheld不被大多數移動瀏覽器的支持，你可以看到這個問題更多：Do iPhone/Android browsers support CSS @media handheld?

其次，你的@media的斷點並不完全任何手機屏幕大小相匹配，這裏是一個網站列出媒體查詢標準設備，您可以檢查：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/