如果我们的电脑浏览器出现CSS兼容问题，现在很容易解决。Chrome浏览器自带检查工具，火狐浏览器的FireBug浏览器也很好用。Safari、360、IE、EDGE都有自己的调试工具。他们可以检查html+JS+CSS是怎么解释的，如果解释错了，他们可以看看是哪里的原因。但以上都是关于电脑的。如果iPhone上的网站存在兼容性问题，如何解决？教大家一个方法，需要一台Mac电脑和一部iPhone。以本网站为例，现象如下：该网站在PC、Mac、Android手机上没有问题，但在iPhone上Safari出现黑色背景，只能平铺30%，部分横幅只有30%宽。（iPhone6、iPhone6plus、iPhone5S、iPhone5都有问题，iPhone3GS、iPadmini2没有问题）分析方法：使用MacSafari浏览器，菜单中的“开发”，将数据线连接到iPhone，类似“check"或firebug代码样式出现在MacSafari中，选中的块出现在iPhoneSafari中。这样就很容易识别是哪个block出了问题，泄露了什么样的代码，也很容易找到问题的原因。备注：同一个html+css在不同的设备、不同的浏览器上有不同的解释和显示效果。发现DIV显示了页面宽度的30%，但是子DIV的内容是100%。很明显，子级并没有展开父级DIV，clearboth都是无效的。考虑到宽度的问题，上网查了下原因。原来iPhone上Safari的默认宽度是980px。需要指定html的视口宽度，否则按照默认的980px处理。解决方法：最简单的方法是在head标签中初始化viewport，具体见下面代码：网页的宽度是960px或1080px，你可以在width上加上这个值，并将initial-scale设置为合适的倍数。比如一个页面的宽度是1080px，设置为：
