Javascript、Jquery获取浏览器和屏幕各种高度宽度

Javascript:

<code class="hljs scss has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-function" style="box-sizing: border-box;">alert(document.body.clientWidth)</span>;        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//网页可见区域宽(body)</span>

<span class="hljs-function" style="box-sizing: border-box;">alert(document.body.clientHeight)</span>;       <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//网页可见区域高(body)</span>

<span class="hljs-function" style="box-sizing: border-box;">alert(document.body.offsetWidth)</span>;       <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//网页可见区域宽(body)，包括border、margin等</span>

<span class="hljs-function" style="box-sizing: border-box;">alert(document.body.offsetHeight)</span>;      <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//网页可见区域宽(body)，包括border、margin等</span>

<span class="hljs-function" style="box-sizing: border-box;">alert(document.body.scrollWidth)</span>;        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//网页正文全文宽，包括有滚动条时的未见区域</span>

<span class="hljs-function" style="box-sizing: border-box;">alert(document.body.scrollHeight)</span>;       <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//网页正文全文高，包括有滚动条时的未见区域</span>

<span class="hljs-function" style="box-sizing: border-box;">alert(document.body.scrollTop)</span>;           <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//网页被卷去的Top(滚动条)</span>

<span class="hljs-function" style="box-sizing: border-box;">alert(document.body.scrollLeft)</span>;           <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//网页被卷去的Left(滚动条)</span>

<span class="hljs-function" style="box-sizing: border-box;">alert(window.screenTop)</span>;                     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//浏览器距离Top</span>

<span class="hljs-function" style="box-sizing: border-box;">alert(window.screenLeft)</span>;                     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//浏览器距离Left</span>

<span class="hljs-function" style="box-sizing: border-box;">alert(window.screen.height)</span>;                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//屏幕分辨率的高</span>

<span class="hljs-function" style="box-sizing: border-box;">alert(window.screen.width)</span>;                 <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//屏幕分辨率的宽</span>

<span class="hljs-function" style="box-sizing: border-box;">alert(window.screen.availHeight)</span>;          <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//屏幕可用工作区的高</span>

<span class="hljs-function" style="box-sizing: border-box;">alert(window.screen.availWidth)</span>;           <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//屏幕可用工作区的宽</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li></ul>

Jquery

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>window).height());                           <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>浏览器当前窗口可视区域高度

alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document).height());                        <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>浏览器当前窗口文档的高度

alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document.body).height());                <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>浏览器当前窗口文档body的高度

alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document.body).outerHeight(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>));  <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>浏览器当前窗口文档body的总高度 包括border padding margin

alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>window).width());                            <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>浏览器当前窗口可视区域宽度

alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document).width());                        <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>浏览器当前窗口文档对象宽度

alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document.body).width());                <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>浏览器当前窗口文档body的宽度

alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document.body).outerWidth(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>));  <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>浏览器当前窗口文档body的总宽度 包括border padding margin</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul>