故障现象：
当我们在写代码的时候如果，页面头部（#header ）样式定义使用了 100%宽度，那么当我们把浏览器窗口缩小的时候就会发现有部分内容被截断或显示不全；
原因分析：
当窗口缩小时，浏览器默认 100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(比如你设置的网页整体宽度为 960px)。从而出现了固定宽度大于 100%宽度的现象。浏览以此理解来解析页面，就出现了容器宽度理解上的差异，出现了一个非常奇特的 BUG；
解决办法：
只需要使用 css 的 min-width:980px 对 width:100%的对象加以限制即可以解决；
如果在做自适应网页或测试网页在不同设备下的兼容性测试时候，比如 iPad 的 Safari 浏览器中背景显示不全，等问题，都可以尝试定位到该 div 后，即很有可能发现是指定 css 的宽度为 100%导致问题；safari 中 viewport 默认宽度为 980px，若事先未指定其初始 viewport 宽度，则会默认按照 980px 处理。可以默认初始化 viewport 宽度或在 css 中设定 min-width 即可解决；
在做一个 wap 网站时发现在 IPONE4 页面显示宽高为 320*480 页不是 640*960 了，这样显示就不全屏了，下面我来告诉你具体的解决办法。
如果你也遇到了同样的问题，想要快速的解决掉它。你可以试着将 viewport 设置或添加成如下 CODE:
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5" />
如果恰巧解决了这个问题，那么恭喜你！
两种：
缩放自适应
响应式布局
第一种，缩放自适应的页面， 可以使用
<!--最普通最常见的用法--> <meta name="viewport" content="width=device-width" /> <!-- 如果有足够的高清图资源，主要支持 retina 设备(ip4/4s)，那么推荐下面这种--> <meta name="viewport" content="width=640" /> <!-- 如果针对 new iPad，甚至可以试试这个--> <meta name="viewport" content="width=1536" />
第二种，复杂的响应式布局，实际就是要求页面在切换横屏时不放大，从而留出空白用以填充或调整列布局。
此时可以看到无论 width 还是 initial-scale 都无法限制横屏时的放大，因而必须用上 minimum/maximum-scale,而 width 和 initial-scale 则推荐使用 initial-scale，使三个 scale 参数统一。
<!--最普通最常见的用法--> <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1" /> <!--for retina screen--> <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5" />
如果你在 Android，或其它移动设备上也遇到了分辨率与页面尺寸不符的情况，你也可以试着怀疑一下 viewport。
