满足不同网络设备的最有效方式？答案

【问题标题】：Most efficient way to cater for different web devices?满足不同网络设备的最有效方式？
【发布时间】：2011-12-15 00:08:12
【问题描述】：

投票结束的人不具建设性，请阅读全文。具体问题在最后。寻找现实世界的例子和方法。

上下文

随着智能手机、平板电脑等众多设备越来越多地用于访问网络，因此规划、设计（响应式）和开发（尤其是前端）非常重要，以便为设备提供快速且量身定制的用户体验。

正在建设一些令人惊叹的网站。看看mediaqueri.es（调整浏览器大小）

我们看到了这样的方法

你们今天在外面做什么？你为什么选择你的方法，最重要的是，如果它不是解决这个问题的最有效方法，那是什么？

我正在寻找的东西：

【问题讨论】：

【解决方案1】：

我认为您正在寻找的是响应式网页设计。

见：

响应式网页设计（使用 CSS）不一定能解决性能问题，但却是一个很好的起点。请记住，过早的优化是万恶之源，您可以分析您的用户和带宽，并在设计到位后确定需要优化的地方。

有关一些缺点的讨论，例如，在浏览器中调整图像大小（不过，您可以使用 CSS 和/或 AJAX 解决这个问题），请参阅：

【讨论】：

【解决方案2】：

你会想要使用像PhoneGap 这样的框架。 HTML 发展缓慢，但每天都会有大约 10 款带有新 ~~bug~~“功能”的新设备投放市场，而你是无辜的应用程序 - 一小群人根本无法处理必要的工作。

对于不同的设备，有两个麻烦的地方：

对于屏幕尺寸，今天有非常酷的解决方案。例如，一些框架将 CSS 样式“640x400”或“480x800”添加到body 元素。这使得根据屏幕大小设置元素样式变得非常简单。或者您可以使用 JavaScript 拉入匹配的样式表。

对于渲染错误，您需要解决方法。正如我上面所说，这不是一个人或一小群人可以处理的。每隔几个月，就会出现一个带有新渲染引擎和新“功能”的新版本 Android。您为其中一个解决问题并同时破坏其他十个。选择一个可以在许多设备上运行良好并且对更改开放的框架（阅读：避免任何专有的）。

这样，您可以获得常见问题的解决方案，并且可以自己解决小问题。

【讨论】：

【解决方案3】：

我肯定会推荐 RedFilters 答案 (+1)。

我只是想添加一些您可能会发现与此主题相关的有趣的库。它们涉及浏览器功能检测和条件资源加载。看看他们：

【讨论】：