无论是pc端还是m端，兼容性总是一个问题，调试兼容性浪费了设计人员很多时间，对于iPhone Safari 浏览器也是一样，遇到了兼容性的问题也要调试，至于如何调试还需要IT培训网小编为大家一一道来。

如何调试 iPhone Safari 浏览器的CSS兼容问题

当我们在电脑上浏览网页时，会遇到这样的问题，要么网页错位了，要么不同的浏览器显示的字体不同，如此我们就可以用360浏览器或者谷歌浏览器自带的检查工具进行排查，而最好用的就是火狐的浏览器了，就看大家喜欢用哪个了。

最好排查的就是电脑了，如果是手机上出现了浏览器不兼容的问题怎么办呢，作为网页设计人员该如何解决呢？下面就来给大家谈谈解决的方法，需要有mac电脑和ipone。

以这个网站为例，现象如下：

网站在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，详见下方代码：

<metaname=”viewport”content=”width=网页真实宽度， initial-scale=倍数值”/>

假设网页宽度为 960px 或 1080px，可在width中加入该值，并将 initial-scale 设置一个适合的倍数值。

例如一个页面的宽度为 1080px，则设定为：

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

这样不管加载前后切换横屏还是竖屏，都可以友好显示。

我们用的是：<meta name=”viewport” content=”width=1100″ />

虽然只是一个简单的案例，但足以说明这个方法比较实用，也许你还有其他的方法，可多学一个总归是好的，同时你也可以分享给大家，采用投稿的方式均可哦。