如何調試 iPhone Safari 瀏覽器的CSS兼容問題
我們電腦瀏覽器如果出現CSS兼容問題，現在很好解決，Chrome瀏覽器自帶檢查工具，火狐瀏覽器的FireBug也很好用，Safari、360、 IE、EDGE都有自己的調試工具。他們可以查看html+JS+CSS如何被解釋的，如果被解釋錯了可以看到原因出現在哪。
但是以上說的都是電腦，如果網站在iPhone上出現了兼容問題，該如何解決呢?下面教大家個方法，需要Mac電腦和iPhone。
以這個網站爲例，現象如下：
網站在PC，Mac，安卓手機上均無問題，在iPhone 的 Safari 上出現了黑色背景，只能平鋪30%，有的Banner寬度也只有30%。(iPhone6，iPhone6 plus，iPhone5S，iPhone5都有問題，iPhone3GS，還有iPad mini2 無問題)
分析方法：用Mac 的Safari瀏覽器，菜單中的「開發」，數據線鏈接iPhone，類似「檢查」或firebug之類的方法，在Mac Safari中出現代碼樣式，在iPhone的Safari中出現選擇的區塊。這樣容易辨別是哪塊出現了問題，揭示出什麼樣的代碼，便於查找問題原因。
備註：同樣的html+css，在不同設備和不同瀏覽器上 解釋不同，顯示效果也不同。
發現DIV顯示寬度頁面的30%，但是子DIV內容卻是100%，顯然子沒有撐開父DIV，clear both無效。
考慮寬度的問題，網上搜索原因，原來iPhone的Safari默認寬度是980px，需要指定html的viewport寬度，否則會按照默認980px處理。
解決方案：最簡單的方法是在 head 標籤中初始化好 viewport，詳見下方代碼：
- <metanamemetaname=」viewport」content=」width=網頁真實寬度， initial-scale=倍數值」/>
假設網頁寬度爲 960px 或 1080px，可在width中加入該值，並將 initial-scale 設置一個適合的倍數值。
例如一個頁面的寬度爲 1080px，則設定爲：<metanamemetaname=」viewport」content=」width=1080， initial-scale=0.9″/>
這樣不管加載前後切換橫屏還是豎屏，都可以友好顯示。
我們用的是：<meta name=」viewport」 content=」width=1100″ />
以上只是一個案例，但是這個方法還是挺重要的，希望對朋友提供幫助。