2

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

语境

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

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

我们看到诸如

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

问题）

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

我正在寻找的东西：

  • 它是纯 CSS / JS / HTML 方法，还是服务器端，或组合 - 为什么？
  • 每个设备只获得它需要的资源（图像等），因此它运行良好
  • 站点的维护更容易，即添加/更改功能不是一个巨大的痛苦
  • 一些代码示例总是有用的
  • 让我们省去像 ie7 及以下的旧浏览器
4

3 回答 3

4

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

看：

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

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

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

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

于 2011-10-25T14:34:29.433 回答
0

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

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

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

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

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

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

于 2011-10-25T14:51:42.673 回答
0

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

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

http://www.modernizr.com/

http://yepnopejs.com/

于 2011-11-15T01:06:23.903 回答