媒體查詢不採取行動，我多麼想對iPhone

-1

我是相當新的使用媒體查詢和我可能失去了一些東西很明顯，但我已經圍繞堆棧溢出一看，還沒有發現我的解決方案。媒體查詢不採取行動，我多麼想對iPhone

另外要注意，我使用的是Chrome瀏覽器的舊手機（iPhone 4S）來查看我的網站。

當我查看我的手機網站是完全一樣的，就好像我是來查看它在我的瀏覽器，並沒有把我的媒體查詢到，當我調整它的瀏覽器一樣。

注意第一個圖像是它目前的樣子，我希望它看起來像第二圖像

我會盡力包括相關代碼：

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

媒體查詢：

@media all and (max-width: 701px) { 
.quote { 
    width: 550px; 
} 
} 

@media all and (max-width: 551px) { 
.quote { 
    width: 400px; 
    bottom: 325px; 
} 

nav { display: none } 

header { 
    width: 100%; 
} 
.title { 
    display: block; 
    margin: 0; 
    padding: 35px; 
    text-align: center; 
    color: #2d2d2d; 
} 

.quote span { color: #2d2d2d; } 
.explore span { color: #2d2d2d; } 

.explore { 
    display: block; 
    border: 1px solid #2d2d2d; 
} 


body { 
    background-image: url("http://htc-wallpaper.com/wp-content/uploads/2013/10/Mountain1.jpg?8a4edc"); 
    background-size: cover; 
    background-repeat: no-repeat; 
}

}

來源

2016-04-14 ConorReidd

如果使用Safari在手機上怎麼回事那麼這已經足夠了 – DanyCode

？ – DanyCode

請檢查媒體查詢中的所有支架是否關閉如果「有」，則第二媒體查詢必須在底部 –

我認爲它有。這是您需要更改的字體大小。我相信一些移動設備會自動調整您的字體，但它可能是您不想要的東西。試試這個：

-ms-text-size-adjust: none; 
-webkit-text-size-adjust: none;

讓我知道如果這回答你的問題。

來源

2016-04-14 21:50:34 timolawl

。那麼我的iPhone上的視圖肯定會與上面顯示的第二張圖像相似，而不是第一張 - 意味着背景圖像會發生變化 – ConorReidd

好的，您對圖像不清楚。你應該提到第二個圖像實際上是正確的，而不是你目前的移動視圖。如果您尚未嘗試過，請嘗試使用chrome開發工具，然後選擇一款可比手機在移動設備圖標下進行嘗試。它可以模擬手機上的顯示，但不完美。結果是一樣的嗎？ – timolawl

我試過使用Chrome開發工具，但他們只是如此不準確。它使用媒體查詢模擬網站，但是當我實際使用iPhne查看網站時;它不會正確顯示該網站，不會呈現媒體查詢 – ConorReidd

媒體查詢不採取行動，我多麼想對iPhone

回答

相關問題