重新手到高手，每个前端工程师都需要了解如何获得屏幕宽高。不管是响应式设计或者分辨率适配，这些基础技能都是必不可少的。在这篇文章中，我们将聚焦于jQuery如何获得屏幕宽高的方法。使用jQuery获得屏幕宽高的3种方法作为jQuery的拥趸，我们都知道它提供了一系列的便捷方法来为我们的任务提供解决方案。获得屏幕宽高也不例外。下面是三种广泛使用的方法。1.`$(window).height()`和`$(window).width()`这两个方法分别返回浏览器窗口的高度和宽度，是最经常使用的方式。这两个方法将返回窗口视口的高度和宽度，不包括工具栏和转动条。这两个属性将返回一个数字，例如：```html
屏幕高度：
屏幕宽度：
``````js$(height).text($(window).height());$(width).text($(window).width());```2.`$(document).height()`和`$(document).width()`这两个方法将返回当前文档的高度和宽度，包括转动条和工具栏。这对触及到文档长度的布局很有用。不过，需要注意的是，这只能返回文档的初始尺寸，如果添加了新的内容，它们将不会包括在返回的值中。例如：```html
文档高度：
文档宽度：
``````js$(doc_height).text($(document).height());$(doc_width).text($(document).width());```3.`screen.width`和`screen.height`这两个属性将返回屏幕的宽度和高度，而不是浏览器窗口的大小。这通经常使用于开发跨平台的利用程序。例如：```html
屏幕高度：
屏幕宽度：
``````js$(screen_height).text(screen.height);$(screen_width).text(screen.width);```比较这三种方法，你会发现它们各自有优势和劣势。在使用哪一种方法时，需要根据具体的需要来做决策。怎样使用这些信息？一旦我们获得到了屏幕的宽高，我们就能够开始利用这些信息了。最典型的使用处景是响应式设计和分辨率适配。我们可以通过媒体查询和JavaScript来根据装备的尺寸和方向来调剂样式表和布局。你也能够使用JavaScript来动态调剂元素的大小或添加额外的UI元素。另外，你还可以根据屏幕尺寸和装备类型来选择会不会加载某些资源或启动某些功能，例如，针对移动装备和PC端提供区别的菜单、内容、网格或图象分辨率。结论在本文中，我们学习了如何通过jQuery获得屏幕的宽高。我们介绍了三种区别的方法，和怎样使用这些信息来实现响应式设计和分辨率适配。不管你是正在学习前端开发，或者想提高自己的技能水平，这些技能都是必不可少的。
桂|哥|网|络www.guIgege.cn
