Question

我正在研究自适应方法与被动方法的使用，并且在此过程中一直在阅读所有讨论媒体查询，CSS宽度，屏幕宽度，窗口宽度，文档宽度等。我发现没有单个文档可以解决所有问题这些参数在一个地方进行，并探讨它们在构建自适应或响应站点时可能存在的相互关系。

以下是我的一些问题，这些问题在上述整体上下文中没有完全解释。我来了得出一些结论，并希望澄清结论是否错误。我确实实现了原型，但它似乎使用许多方法工作正常。我想知道实施自适应站点或反应站点的最佳实践是什么。

假设：

一个。使用不同桌面和设备的广泛受众，但使用现代浏览器。

湾基于JS的解决方案优于纯CSS。

℃。仅专注于屏幕显示。

研究（真的，没有多少！）：

//The traditional way to get widths (using Jquery):
windowWidth    = $(window).width();    // returns width of browser viewport
documentWidth  = $(document).width();  // returns width of HTML document
screenWidth    = screen.width;         // screen width  - Physical screen width


//This is post CSS3 approach to handling width
mql = window.matchMedia('screen and (min-width:500px) and (max-width:800px)');
//Check if there was a match:
if (mql.matches) {  //serve your customized page }
//And then there is the listener that can be added to the object returned 
//by the above query, as in for state changes when the browser is resized.  
mql.addListener(someListener); //Fired only if the match state changes

大多数可能简化媒体查询API的插件实际上仅仅依赖于上述API（例如enquire.js）。是的，除了在元标记中指定像素比例因子之外，我还没有看到过设备宽度。有很多帖子质疑为什么通过媒体查询或通过旧方法检索的某些上述宽度参数不匹配。这是一个post。我明白那个。

现在，我的问题是：

在所有这些媒体查询hoopla和数千篇关于自适应/响应式网站的文章中，我们所关注的是基于当前浏览器宽度和对浏览器宽度变化的响应来提供内容？甚至肖像/风景也是一个宽度问题。
实际设备检测不是媒体查询的目标是否正确，并不是开发自适应/反应站点所必需的？媒体查询（屏幕）的唯一目标是将浏览器宽度划分为存储桶或断点（例如，请参阅breakpoint.js）？
为了向广大受众开发响应式/自适应网站，是否值得使用deviceAtlas等设备检测服务？
使用媒体查询API与获得$（window）.width相比，我们获得了哪些真正的优势？是否更广泛的浏览器支持？标准方法？其他优点？你采取哪种方法并不重要？
大多数自适应/响应式网站是否完全忽视用户使用的实际底层物理设备，并且仅依赖于用户代理信息和此处讨论的宽度？

如何选择媒体查询（最小宽度，最大宽度），window.width，screen.width，设备宽度等

0 个答案: