html元標籤不檢測設備寬度？

我已經搜索和搜索，我似乎無法找到爲什麼我的HTML元標記不能在我的iPhone上工作的原因。您可以訪問我的網站http://hadenhiles.mooo.com。如果您調整視口（窗口）的大小，您會看到我的網站完全按照預期進行響應......但是，當您在移動設備上查看它時，您會看到一個看起來好像是桌面版的結果。這裏是頭標記，它的內容：html元標籤不檢測設備寬度？

<head> 
     <meta charset="UTF-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css" /> 
     <link rel="stylesheet" href="style.css" type="text/css" /> 
</head>

正如你可能已經注意到我用我自己的樣式表，以及爲bootstrap3樣式表。我知道當談到佈局時，我應該堅持一種或另一種方式，但是在引入自舉之前，我僅使用自己的媒體查詢製作了該網站。我只在腳註和彈出/導航欄功能中使用引導程序。無論如何bootstrap不是問題。 似乎meta標籤沒有識別到設備寬度，也沒有將初始縮放比例設置爲1.0。我試圖改變我的查詢的最小寬度進行調試，但沒有成功。這裏是我的CSS媒體查詢：

/* Main css */ 

@media only screen and (min-width: 1px) and (max-width: 320px){ 
    /* content */ 
} 
@media only screen and (min-width: 321px) and (max-width: 600px){ 
    /* content */ 
} 
@media only screen and (min-width: 601px) and (max-width: 768px){ 
    /* content */ 
} 
@media only screen and (min-width: 769px) and (max-width: 1020px){ 
    /* content */ 
}

我試圖從@media只有屏幕和切換到@media屏幕有人在另一個問題建議，但要麼沒有成功。起初，我認爲移動設備的最小/最大寬度太大/太小，所以我改變了這一點，沒有發生任何事情。我現在有這個問題已經有3個月了，所以我決定發佈我自己的問題。任何幫助，你可以給我非常感謝。

〜哈登

來源

2014-02-19 Haden Hiles

因此，這是不完全確定發生了什麼事，但我不認爲這是由於MIN和MAX衝突。嘗試只設置最大寬度，因爲這似乎覆蓋了一切。看起來多餘的是，最小寬度是1px，最大寬度是320px，然後是下一個媒體查詢是321px。如果您將最大寬度設置爲320px，它將覆蓋該範圍。如果您設置下一個要600像素，這將涵蓋320-600範圍等

@media only screen and (max-width: 320px){ 
    /* content */ 
} 

@media only screen and (max-width: 600px){ 
/* content */ 
} 

@media only screen and (max-width: 768px){ 
    /* content */ 
} 

@media only screen and (max-width: 1020px){ 
    /* content */ 
}

或者，你可以嘗試使用分設備寬度和最大設備寬度。這裏有一個關於media queries for standard devices的體面資源的鏈接。

來源

2014-02-19 18:41:11

對不起，沒有明確定義問題..沒有解決我的問題越少！非常感謝。 –

或者可能不是......它工作正常，當我使用xCode iPhone模擬器在本地測試網站時，但是當我在網上加載網站時，它不會響應相同的..嗯。 –

嘗試在設備上查看非隱身版本。有關免費重定向服務的事情正在搞亂你的媒體查詢。可能是因爲它將整個網站包裝在一個框架內，而設備不能很好地處理iframe /框架。我願意打賭，如果你把它移到一個專用的服務器上，這樣你就不會重定向，它就會像你期望的那樣工作。 –

html元標籤不檢測設備寬度？

回答

相關問題