迎合不同Web设备的最有效方法? [英] Most efficient way to cater for different web devices?
问题描述
请以投票方式关闭而不是具有建设性意义的，请仔细阅读全文.最后是具体问题.寻找现实世界中的例子和方法.
Folks voting to close as not constructive, read the whole thing please. Specific questions at the end. Looking for real world examples and approaches.
随着智能手机等众多设备的出现，平板电脑正越来越多地用于访问Web，其对计划，设计(响应)和开发(尤其是前端)的重要性非常重要，以便为这些设备提供快速，量身定制的用户体验.
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.
正在构建一些令人惊叹的网站.看看 mediaqueri.es (调整浏览器大小)
There's some amazing sites being built. Have a look at mediaqueri.es (resize your browser)
我们看到了诸如
- 首先使用大屏幕，然后再定位到较小的设备.
- 首先移动设备，然后进行媒体查询以为更大的屏幕增添色彩.
- 使用不同技术(包括服务器端)的设备检测
- 并为设备提供完全不同的标记和内容.
您今天在外面做什么?您为什么选择您的方法，最重要的是，如果它不是解决这个问题的最有效方法，那又是什么?
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?
我正在寻找的东西
- 这是纯CSS/JS/HTML方法，还是服务器端，或两者结合-为什么?
- 每个设备仅获取其需要的资源(图像等)，因此性能良好
- 网站的维护更加容易，即添加/更改功能并不是一件大事
- 某些代码示例总是有用的
- 让我们遗漏了旧的糟糕浏览器，例如ie7和更低版本
推荐答案
我认为您正在寻找的是响应式Web设计.
I think what you are looking for is Responsive Web Design.
请参阅:
http://www.alistapart.com/articles/sensitive-web-design /
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-response-web-design/
响应式Web设计(使用CSS)不一定解决性能问题，但这是一个很好的起点.请记住，过早的优化是万恶之源，您可以分析用户和带宽，并确定适当的设计后就需要在何处进行优化.
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.
要讨论一些不利因素，例如在浏览器中调整图像大小(不过，您可以使用CSS和/或AJAX解决此问题)，请参见:
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/sensitive-design-problems/
这篇关于迎合不同Web设备的最有效方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
