響應/視口在瀏覽器中工作，但不在ios中

我想我正在失去主意。響應/視口在瀏覽器中工作，但不在ios中

我有一個網站（臨時網址爲http://dev.designersnorthwest.com，我最終會刪除此URL，因爲它是一個測試網站，將到期），媒體查詢和響應行爲在Chrome，Firefox和Safari都工作得很好調整大小，並且在我的Android手機上測試得很好，但出於某種原因，我無法弄清楚，它不適用於我測試過的多款iPhone和iPad。

要回答你的第一個問題，我視肯定是存在的......

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

...我甚至試圖把每一個CSS版本我所能，以確保這不是問題。

@-wekbit-viewport{width:device-width;zoom:1;} 
@-ms-viewport{width:device-width;zoom:1;} 
@-o-viewport{width:device-width;zoom:1;} 
@viewport{width:device-width;zoom:1;}

還沒有骰子。我驗證了我的媒體查詢和代碼都很好。我在這裏不知所措。任何建議將不勝感激。

來源

2016-06-10 Talk Nerdy To Me

它看起來像在iOS設備上，您的網站被注入額外的視窗meta標籤到<head>：

<meta name="viewport" content="width=1100">

這就是我看到我的iPhone6模擬器，它可能是壓倒一切的第一視窗meta標籤。我猜你有一個WordPress插件試圖太聰明，並且只爲iOS設備註入這個額外的標籤。我建議你的第一步應該是審計你的插件，關閉任何可能是罪魁禍首的東西，並通過使用free Xcode iOS simulator和debugging with Safari確認標籤已經消失。

祝你好運！

來源

2016-06-10 15:44:10

感謝您的回答。我有幾個問題，如果你不介意的話： 1）我正在尋找Xcode iPhone模擬器 - 我如何「使用Safari進行調試？」我正在看「調試」菜單，我沒有看到任何可以幫助我的東西。 2）出於好奇，你用什麼工具幫助發現這個額外的視口？ –

按照我答案中最後一個鏈接中的說明操作。基本上，一旦在您的iPhone模擬器中打開了「Web Inspector」（在「設置」>「高級」下），您可以在桌面上打開Safari並轉到開發> iPhone模擬器並檢查您已加載的網站模擬器。我沒有這樣做，只是查看源代碼，直到我發現iOS中的元標記不同。 –

好吧，我陷入困境。我從來沒有這樣做過，所以我不想在我的桌面上打開Safari瀏覽器查看完全不同的程序中的東西。我是Xcode的新手。感謝您的幫助。 –

響應/視口在瀏覽器中工作，但不在ios中

回答

相關問題