0

我正在研究自适应方法与反应方法的使用，并且在此过程中一直在阅读有关媒体查询、css 宽度、屏幕宽度、窗口宽度、文档宽度等的所有讨论。我发现没有一个文档是这样的在一个地方正面解决所有这些参数，并探索它们在构建自适应或响应式站点中可能存在的相互关系。

以下是我的一些问题，这些问题在上述上下文的整体中没有在其他地方得到充分解释。我得出了一些结论，如果结论有误，我希望得到澄清。我确实实现了一个原型，但它似乎使用许多方法都可以正常工作。我想知道实现自适应或反应式站点的最佳实践是什么。

假设：

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

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

C。只专注于屏幕显示。

研究（真的，没什么大不了的！）：

//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）。是的，除了在元标记中指定像素比例因子外，我还没有看到在任何地方使用过设备宽度。有许多帖子质疑为什么通过媒体查询或通过旧方法检索到的某些上述宽度参数不匹配。这是一篇这样的帖子。我明白那个。

现在，我的问题是：

  1. 在所有这些媒体查询喧嚣和在自适应/响应式网站上撰写的数千篇文章中，我们所关心的只是根据当前浏览器宽度和对浏览器宽度变化的响应来提供内容？即使是纵向/横向也是一个宽度问题。
  2. 实际设备检测不是媒体查询的目标，并且对于开发自适应/反应式站点并不是真正必要的，这是否正确？媒体查询（对于屏幕）的唯一目标是将浏览器宽度划分为存储桶或断点（例如，参见breakpoint.js ）？
  3. 为了向广大受众开发响应式/自适应站点，是否值得使用deviceAtlas等设备检测服务？
  4. 通过使用媒体查询 API 与仅获得 $(window).width 相比，我们获得了哪些真正的优势？是否支持更广泛的浏览器？标准方法？其他优势？你采取哪种方法都没有关系？
  5. 大多数自适应/响应式站点是否对用户使用的实际底层物理设备完全视而不见，并且仅依赖于 USER AGENT 信息和此处讨论的宽度？
4

0 回答 0