满足不同网络设备的最有效方法？
人们投票结束，因为没有建设性，请阅读全文。具体问题在最后。寻找现实世界的例子和方法。
背景
随着智能手机、平板电脑等众多设备越来越多地用于访问网络，规划、设计（响应式）和开发（尤其是前端）非常重要，以便为设备提供快速且定制的用户体验。
一些令人惊叹的网站正在建设中。看看mediaqueri.es（调整浏览器大小）
我们首先看到大屏幕等方法
- ，然后针对较小的设备。
- 首先是移动设备，然后是媒体查询，以便为更大的屏幕增添趣味。
- 使用不同技术（包括服务器端）进行设备检测
- ，并向设备提供完全不同的标记和内容。
问题：
你们今天在外面做什么？你为什么选择你的方法，最重要的是，如果它不是解决这个问题的最有效方法，那么什么是？
我正在寻找的东西：
- 它是纯 CSS / JS / HTML 方法，还是服务器端，还是组合 - 为什么？
- 每个设备只获取它需要的资源（图像等），因此它表现良好
- 站点的维护更容易，即添加/更改功能并不是一个巨大的痛苦
- 一些代码示例总是有用的
- 让我们忽略旧的垃圾浏览器，如ie7和以下
Folks voting to close as not constructive, read the whole thing please. Specific questions at the end. Looking for real world examples and approaches.
Context
With numerous devices like smart-phones, tablets being used increasingly to access the web its important to plan, design (responsively) and develop (esp. your front end) to give the devices a fast and tailored user experience.
There's some amazing sites being built. Have a look at mediaqueri.es (resize your browser)
We see approaches such as
- big screen first, then target smaller devices.
- mobile first then media queries to spice things up for bigger screens.
- device detection with different techniques (including server side)
- and serving completely different markup and content to devices.
Question(s)
What are you folks doing out there today? Why did you choose your approach and most importantly if it isn't the most efficient approach to tackle this, then what is?
Things I'm looking for:
- Is it a pure CSS / JS / HTML approach, or server side, or a combination - why?
- Each device gets only the resources (images etc.) that it needs so it performs well
- Maintenance of the site is easier, i.e. adding / changing features is not a huge pain
- Some code samples are always useful
- lets leave out old shitty browsers like ie7 and below
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我认为您正在寻找的是响应式网页设计。
请参阅：
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/
I think what you are looking for is Responsive Web Design.
See:
http://www.alistapart.com/articles/responsive-web-design/
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Responsive Web Design (using CSS) does not necessarily address performance issues but is a good starting point. Keeping in mind that premature optimization is the root of all evil, you can profile your users and bandwidth and determine where you need to optimize once you have a working design in place.
For a discussion of some of the downsides, e.g., image resizing in the browser (you can work around this with CSS and/or AJAX, though), see:
http://www.webdesignshock.com/responsive-design-problems/
您将需要使用像 PhoneGap 这样的框架。 HTML 发展缓慢，但每天都有大约 10 个带有新
bug“功能”的新设备进入市场，而你无辜的应用程序 - 一小群人根本没有办法处理必要的工作。对于不同的设备，有两个麻烦区域：
对于屏幕尺寸，目前有非常酷的解决方案。例如，某些框架将 CSS 样式“640x400”或“480x800”添加到
body元素中。这使得根据屏幕尺寸设置元素样式变得非常简单。或者您可以使用 JavaScript 拉入匹配的样式表。对于渲染错误，您需要解决方法。正如我上面所说，这不是一个人或一个小团体能够处理的。每隔几个月，就会出现一个新版本的 Android，带有新的渲染引擎和新的“功能”。你解决了其中一个问题，同时又破坏了另外十个问题。选择一个能够与许多设备兼容且可以进行更改的框架（请阅读：避免任何专有的内容）。
这样，您可以获得常见问题的解决方案，并且可以自己解决小问题。
You will want to use a framework like PhoneGap. HTML evolves slowly but every day, about 10 new devices with new
bugs"features" hit the market and you innocent app - there simply is no way for a small group of people to handle the necessary work.As for different devices, there are two trouble areas:
For screen sizes, there are pretty cool solutions today. For example, some frameworks add the CSS style "640x400" or "480x800" to the
bodyelement. That makes it dead simple to style elements depending on the screen size. Or you can use JavaScript pull in the matching style sheets.For render bugs, you'll need workarounds. As I said above, this is nothing a single person or a small group can handle. Every few months, there is a new version of Android with a new render engine and new "features". You fix problems for one of them and break ten others at the same time. Select a framework which plays well with many devices and which is open to changes (read: avoid anything proprietary).
That way, you get solutions for the common problems and you can fix small issues yourself.
我肯定会推荐 RedFilters Answer (+1)。
我只是想添加一些您可能会发现与该主题相关的有趣的库。它们涉及浏览器功能检测和浏览器功能检测。有条件的资源加载。
查看它们：
http://www.modernizr.com/
http://yepnopejs.com/
I would definately recomment RedFilters Answer (+1).
I just wanted to add some libraries which you might find interesting relating to this topic. They involve Browser feature detection & conditional resource loading.
check them out:
http://www.modernizr.com/
http://yepnopejs.com/