使用响应式布局定位哪些设备/浏览器

Question

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

这不是我第一次开发这种类型，但这是一个关键帐户，必须铺好路径。

布局将从 300 像素宽度调整到 1200 像素以上，因此几乎适用于“任何”设备和浏览器，但我对此的承诺有点迷失。对于桌面网站，很容易在合同中写下受支持的浏览器将是“IE7+，FF、Safari、Chrome、Opera 的最新版本”，但是您对响应式网站有何看法？

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

周围有很多桌面工具可以模拟各种视口并执行测试，但它们几乎不能作为“真实的东西”工作；还是我们开发人员可以“以合同方式”参考一种标准？您是如何做到这一点的？您对客户的承诺是什么？

Answer 1

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

采用分层方法（金/银/铜）。旧的和未经测试的浏览器将获得内容（IE7、旧的黑莓、旧的任何东西）。新浏览器的内容和布局都不错（IE8/9，Firefox

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

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

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

希望对你有帮助

Answer 2

响应式布局的目标设备/浏览器
您应该以最低分辨率而不是设备或浏览器为目标。您应该重新调整设计的大小并注意设计不再舒适地工作，然后使用媒体查询来响应和调整设计。

客户： 我认为理想情况下，您正在寻找一种向客户解释该概念的方法。您需要做的是传达目标，即尽可能提供最佳体验。我发现您应该对您的客户诚实，让他们知道您正在遵循行业最佳实践，并且该设计将在市场上的大多数设备和浏览器中“实用”。

这是我喜欢使用的一个简介：

跨平台的兼容性：由于大量的网络 浏览器、平台和设备，网站的用户体验 可能会更改以最适合观看平台。

如果你想解释，或者被要求解释这意味着什么，我会说：

我们（我）始终使用最佳做法来满足网络行业标准 设计。我们（我）尽我们的（我的）最大努力确保设计将是 所有主流平台上的“功能”。由于越来越 大量的网络访问设备可用，我不能保证 设计在一台设备和另一台设备上看起来都一样。

您还必须考虑到一直在创建新设备。因此，您不想让您的声明过于具体，否则您将改装您的设计以适应下一个上市的 iWatch 或 iFridge。

请记住传达真正重要的内容，即显示内容。大多数情况下，文本和图像几乎可以在任何地方使用。阴影、圆角、视频 (IE7) 和媒体查询等花哨的东西并不总是有效，但不应掩盖内容。

此外，Web 应用程序可能有点诡计，因为某些表单元素不能跨设备和浏览器工作。 （例如：文件上传）。

希望这会有所帮助。

我不是合同律师，您可能想向律师助理或精通法律的朋友寻求进一步的建议。

Answer 3

经历了很多次，这些是我倾向于向客户展示的关键点，以使他们理解这个概念。

1. 什么是跨浏览器、平台 (OS)、屏幕分辨率和设备屏幕尺寸。我倾向于拍摄 W3C 统计数据的最新截图或链接，向他们展示过去 2 年的一些趋势以及这个市场的走向。它清楚地让他们相信他们需要响应式布局。
2. 如果他们想要进一步的证据，我会在至少 2-3 台设备上使用 Adob​​e Edge Inspect 向他们展示 twitter bootstrap 和 jquery UI 和 jquery 移动网站。笔记本电脑、平板电脑和手机都可以在同一个网络上，只需浏览网站即可向他们展示它对不同尺寸的响应。
3. 我收集了 IE7、IE6、Chromeframe、Android 原生浏览器与 Android 上的 Chrome、iPhone4 与 iPhone5 浏览器的优缺点列表。通常我会看到他们更倾向于哪种方式，如果是手机，我会让他们了解该市场的利弊。大多数时候，他们应该明白这不是一个应用，而是一个响应式网站。
4. 当您撰写提案时，请勿填写“我们将涵盖所有设备”。你永远不能那样做。现实点。在以书面形式提出这些声明之前，创建虚拟机和模拟器以至少测试您将要使用的框架。设置 VM 或 Virtual Box 是免费的，您可以获取 Linux 和 eclipse 或 netbeans 来运行虚拟手机和平板电脑并在其上浏览您的框架。
5. 对于屏幕分辨率和屏幕尺寸，W3C 统计数据非常真实且令人信服。使用它们并在 firefox 或 chrome 中使用分辨率测试类型的插件，并为您过去的工作或框架截取一些屏幕截图，以便您至少可以展示所涉及的优点或可以做和不能做的限制。

这里的大多数答案都非常正确，只是想添加如何使用 W3C 和统计数据来说服响应式布局的路线。现在有超过一百万个在线示例网站可以说服人们，在过去的 6 个月里，我发现人们确实仅通过第 1 步就被说服了。

Answer 4

很清楚。您的客户想要一个现代化的网站。但是，并非所有浏览器都支持所有现代功能。您的客户希望明智地花钱并拥有一个随着时间的推移而改进的网站。随着新浏览器的发布，不会很快变老，并且会出现新的错误。这就是为什么分级浏览器支持适用于：http://jquerymobile.com/gbs/

网站可用于所有浏览器。主流浏览器将获得增强的用户体验。大多数现代浏览器都会获得超酷的最新功能。

让客户知道，您越是“破解”网站以获得某些功能以与某些有缺陷的旧浏览器一起使用，它就越有可能在新浏览器上崩溃。不值得花时间和金钱。

Answer 5

这是我在设计响应式网站时所做的。

当检测到旧的或不受支持的浏览器时，网站将简单地排除使其响应的 jQuery 元素，因此结果是一个固定宽度的网站。

现在，你要告诉你的客户什么？

坦率地说。告诉他们您使您的网站能够响应现代设备。对于较旧的设备，他们的网站不会那么好看。也给他们看几个例子。一些大公司，只是显示一个警报，告诉用户他们的浏览器已经过时，网站将无法正常运行。一个例子是谷歌。

因此，基本上，您的网站适用于所有设备，但看起来更好，并且可以在现代设备和浏览器上响应。