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

Question

人们投票以关闭而不是建设性的，请阅读整件事。最后的具体问题。寻找现实世界的例子和方法。

上下文

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

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

我们看到诸如

之类的方法

• 首先是大屏幕，然后定位较小的设备。
• 移动首先是媒体查询，以便为更大的屏幕增添趣味。
• 使用不同技术（包括服务器端）检测设备
• 并为设备提供完全不同的标记和内容。

问题（S）

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

我正在寻找的东西：

• 它是纯CSS / JS / HTML方法，还是服务器端，还是组合 - 为什么？
• 每个设备只获取所需的资源（图像等），因此效果良好
• 网站的维护更容易，即添加/更改功能并不是一个巨大的痛苦
• 某些代码示例始终有用
• 让我们忽略像ie7及以下
这样的旧浏览器

Answer 1

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

请参阅：

http://www.alistapart.com/articles/responsive-web-design/
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

响应式Web设计（使用CSS）并不一定能解决性能问题，但却是一个很好的起点。请记住，过早优化是所有恶意的根源，您可以分析您的用户和带宽，并确定在您有适当的设计后需要优化的位置。

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

http://www.webdesignshock.com/responsive-design-problems/

Answer 2

您需要使用PhoneGap之类的框架。 HTML发展缓慢但每天都有大约10个具有新错误“功能”的新设备进入市场并且你是无辜的应用程序 - 一小部分人根本无法处理必要的工作。 / p>

对于不同的设备，有两个问题区域：

1. 屏幕尺寸
2. 渲染错误

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

对于渲染错误，您需要解决方法。正如我上面所说，这不是一个人或一个小团体可以处理的。每隔几个月，就有一个新版Android，带有新的渲染引擎和新的“功能”。你可以解决其中一个问题并同时打破其他十个问题。选择一个适用于许多设备的框架，该框架可以更改（阅读：避免任何专有）。

通过这种方式，您可以获得常见问题的解决方案，并且您可以自行解决小问题。

Answer 3

我肯定会推荐RedFilters答案（+1）。

我只想添加一些您可能会发现与此主题相关的库。它们涉及浏览器功能检测＆amp;条件资源加载。 检查出来：

http://www.modernizr.com/

http://yepnopejs.com/