爲什麼此CSS媒體查詢不會更改網站，因爲它顯示在iPhone上？

-1

在http://ccachicago.pragmatometer.com，我有以下媒體查詢的樣式表，意味着垂直堆疊菜單項，並撞了字體大小：爲什麼此CSS媒體查詢不會更改網站，因爲它顯示在iPhone上？

@media (handheld, only screen and (max-width: 1023px)) 
    { 
    div, p 
     { 
     font-size: 36px !important; 
     } 
    #navigation > li 
     { 
     display: block; 
     } 
    }

我想要做的比這更多的響應式設計的方面，但正確現在我沒有進行煙霧測試。我已經重新加載了這個頁面幾次，它似乎以內聯方式顯示菜單項，橫向顯示，並且文本不會在P中顯示爲文本。

如何更改1024×1024顯示的<的字體大小和塊/內嵌顯示？

在頁面的頭部

來源

2014-03-05 JonathanHayward

想要在1024像素寬（iPad）或小於1024像素寬的分辨率下疊加分辨率的導航菜單？現在你的代碼被設置爲後者，而不是前者。只是想確保你知道這一點。這可能是因爲它是body的子元素，它的寬度爲80％，所以表單太寬（首先填充80％）需要堆疊它們。 – TylerH

你需要包括

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

這是需要讓手機不只是規模的網站以適合窗口。

然後改變你的媒體查詢到以下幾點：

@media handheld, only screen and (max-width: 1023px) 
{ 
div, p 
    { 
    font-size: 36px !important; 
    } 
#navigation {height:auto;} 
#navigation > li 
    { 
    float:none; 
    width:100%; 
    } 
}

可能會有更多的覆蓋，你需要做的，這取決於你想要的最終輸出是

我甚至會建議使用媒體查詢作爲

@media only screen and (max-width: 1023px)

這樣你就可以在你的瀏覽器中測試

來源

2014-03-05 22:14:44 Erik

手持式媒體類型已成爲多餘的蘋果& Android宣稱自己是屏幕，我相信手持媒體類型是用於具有非常基本的網絡瀏覽器的舊設備。

我相信這是在這裏找到答案： media queries in responsive design

但你還需要一箇中繼檢視點標記添加到你的頭上，以防止移動設備調整網站。

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

來源

2014-03-06 09:52:09

爲什麼此CSS媒體查詢不會更改網站，因爲它顯示在iPhone上？

回答

相關問題