響應式設計 - 媒體查詢不適用於iPhone？

我正在嘗試創建適合我的網站的移動版本，以使我的網站能夠響應較小的屏幕尺寸並相應地進行縮放。響應式設計 - 媒體查詢不適用於iPhone？

我創建了一些媒體查詢，當在桌面上調整大小時，在瀏覽器中表現正確。

在我的iPhone上，safari只是收縮整個網站，但仍然保持全尺寸網站的縱橫比。如何獲取媒體查詢以進行觀察？我錯過了什麼嗎？

這裏的沙箱，我想獲得正常工作的鏈接 - 任何幫助或建議表示讚賞：

2012-10-21 Gearu

你有觀察孔元在你的HTML？

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

2012-10-22 00:09:42 coopersita

非常感謝您的回答..這個答案幫助了我很多..但小的更正我的朋友coopersita ..你錯過了一個關閉「在你的標籤;） –

LOL！修復它。謝謝。 – coopersita

我試過編輯這個答案來修正不正確的語法，但它被拒絕了。它應該是（幾乎像user1506194的答案）：'' – penfold

我想你會發現在Chrome與警告;而不是，這應該只是罰款：

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

2013-08-21 13:07:21

我編輯了接受的答案，因爲這個語法是正確的。 – penfold

我剛剛經歷了一天解決此相同的問題後，最離奇的事情。如果一切都失敗，請嘗試一下...

我的筆記本在開發過程中對筆記本電腦的反應非常敏感，但在我的iPhone，iPad或三星筆記本上完全沒有問題。我終於發現，我不得不把註釋行的DOCTYPE聲明之後和HTML語言語句之前，像這樣：

<!DOCTYPE html> 
<!-- This comment line needed for bootstrap to work on mobile devices --> 
<html lang="en">

最後，我的網頁是響應在移動設備上。奇怪的！

2018-03-03 23:16:34 Filemangler

回答