我們電腦瀏覽器如果出現(xiàn)CSS兼容問(wèn)題，現(xiàn)在很好解決，Chrome瀏覽器自帶檢查工具，火狐瀏覽器的FireBug也很好用，Safari、360、IE、EDGE都有自己的調(diào)試工具。他們可以查看html+JS+CSS如何被解釋的，如果被解釋錯(cuò)了可以看到原因出現(xiàn)在哪。

但是以上說(shuō)的都是電腦，如果網(wǎng)站在iPhone上出現(xiàn)了兼容問(wèn)題，該如何解決呢?下面教大家個(gè)方法，需要Mac電腦和iPhone。

以這個(gè)網(wǎng)站為例，現(xiàn)象如下：

網(wǎng)站在PC，Mac，安卓手機(jī)上均無(wú)問(wèn)題，在iPhone 的 Safari 上出現(xiàn)了黑色背景，只能平鋪30%，有的Banner寬度也只有30%。(iPhone6，iPhone6 plus，iPhone5S，iPhone5都有問(wèn)題，iPhone3GS，還有iPad mini2 無(wú)問(wèn)題)

分析方法：用Mac 的Safari瀏覽器，菜單中的“開(kāi)發(fā)”，數(shù)據(jù)線鏈接iPhone，類(lèi)似“檢查”或firebug之類(lèi)的方法，在Mac Safari中出現(xiàn)代碼樣式，在iPhone的Safari中出現(xiàn)選擇的區(qū)塊。這樣容易辨別是哪塊出現(xiàn)了問(wèn)題，揭示出什么樣的代碼，便于查找問(wèn)題原因。

備注：同樣的html+css，在不同設(shè)備和不同瀏覽器上 解釋不同，顯示效果也不同。

發(fā)現(xiàn)DIV顯示寬度頁(yè)面的30%，但是子DIV內(nèi)容卻是100%，顯然子沒(méi)有撐開(kāi)父DIV，clear both無(wú)效。

考慮寬度的問(wèn)題，網(wǎng)上搜索原因，原來(lái)iPhone的Safari默認(rèn)寬度是980px，需要指定html的viewport寬度，否則會(huì)按照默認(rèn)980px處理。

解決方案：最簡(jiǎn)單的方法是在 head 標(biāo)簽中初始化好 viewport，詳見(jiàn)下方代碼：

”viewport”content=”width=網(wǎng)頁(yè)真實(shí)寬度， initial-scale=倍數(shù)值”/>

假設(shè)網(wǎng)頁(yè)寬度為 960px 或 1080px，可在width中加入該值，并將 initial-scale 設(shè)置一個(gè)適合的倍數(shù)值。

例如一個(gè)頁(yè)面的寬度為 1080px，則設(shè)定為：

”viewport”content=”width=1080， initial-scale=0.9″/>

這樣不管加載前后切換橫屏還是豎屏，都可以友好顯示。

我們用的是：”viewport” content=”width=1100″ />

以上只是一個(gè)案例，但是這個(gè)方法還是挺重要的，希望對(duì)朋友提供幫助。

網(wǎng)站建設(shè)專(zhuān)家中科服網(wǎng)絡(luò)（www.xinzz.cc）, 專(zhuān)注于高端品牌網(wǎng)站建設(shè)的解決方案，為您提供專(zhuān)業(yè)、安全的企業(yè)展示網(wǎng)站建設(shè)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、商城系統(tǒng)網(wǎng)站建設(shè)、SEO優(yōu)化、網(wǎng)站認(rèn)證、網(wǎng)絡(luò)營(yíng)銷(xiāo)、并提供一站式互聯(lián)網(wǎng)基礎(chǔ)服務(wù)。7×24小時(shí)專(zhuān)業(yè)技術(shù)支持,互聯(lián)網(wǎng)用戶(hù)服務(wù)的選擇。