testing - 响应式布局针对哪些设备/浏览器

Question

我正在为客户(项目已被接受，但现在是解释不同功能的问题)写一份详细的估算，以开发一个响应式布局的网站。

这不是我第一次进行此类开发，但这是一个关键客户，必须铺平道路。

布局将从 300px 宽度调整到 1200+px，因此几乎适用于“任何”设备和浏览器，但我对此的 promise 有点失落。对于桌面网站，很容易在您的契约(Contract)中写明支持的浏览器将是“IE7+、最新版本的 FF、Safari、Chrome、Opera”，但是对于响应式网站，您怎么写？

我知道我有很多设备可以用来执行测试(比如 PC、Mac、iPad、iPhone、2 或 3 台 Android 设备)，但我该对我的客户说什么呢？我不能写“网站可以在任何设备上运行”，也不能给出它可以运行的设备/浏览器组合的详尽列表。而且我不想陷入“我叔叔在他的 2.2 Android 旧手机上看到该网站但它不工作” 的困境。

有很多桌面工具可以模拟各种视口(viewport)并对其进行测试，但它们很难像“真实的东西”那样工作；还是我们开发人员可以“按契约(Contract)”引用一种标准？您如何管理它以及您对客户的 promise 是什么？

Answer 1

采用渐进式增强方法进行开发。不可能让一个网站像素完美，并且在每个浏览器上都一样。

采用分层方法(金牌/银牌/铜牌)。旧的和未经测试的浏览器将获得内容(IE7，旧的黑莓，旧的任何东西)。新浏览器的内容和布局都不错(IE8/9、Firefox < 4)。现代浏览器会得到一个典型的漂亮的现代网站。

可以通过适当的思考来设置它。从下往上构建它。青铜到白银再到黄金。从最小的设置开始(只有颜色、字体、文本。没有 div，没有布局，nada)。这是你的青铜器。接下来获得银级设置。包括布局。此布局适用于较小的屏幕。最后我们将拥有黄金。这将包括用于更大屏幕的媒体查询和用于提高可用性和精细度的 JS。

通过将布局包装在@media only screen{} 查询中，可以将布局分为青铜级和银级。旧的浏览器不理解它。内容仍会出现在这些浏览器上。要在 Silver 和 Gold 之间进行拆分，只需放入一个最小宽度的媒体查询即可。

此外，确保客户理解“网站可在任何设备上运行”的定义。仅仅因为 Opera Mini 不支持 line-height 并不意味着该网站无法正常工作。这是 Brad Frost 就该主题撰写的一篇文章:支持与优化:http://bradfrostweb.com/blog/mobile/support-vs-optimization/

希望能帮到你