获取浏览器视口宽度和高度

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了获取浏览器视口宽度和高度相关的知识,希望对你有一定的参考价值。

  1. <script type="text/javascript">
  2. <!--
  3.  
  4. var viewportwidth;
  5. var viewportheight;
  6.  
  7. // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
  8.  
  9. if (typeof window.innerWidth != 'undefined')
  10. {
  11. viewportwidth = window.innerWidth,
  12. viewportheight = window.innerHeight
  13. }
  14.  
  15. // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
  16.  
  17. else if (typeof document.documentElement != 'undefined'
  18. && typeof document.documentElement.clientWidth !=
  19. 'undefined' && document.documentElement.clientWidth != 0)
  20. {
  21. viewportwidth = document.documentElement.clientWidth,
  22. viewportheight = document.documentElement.clientHeight
  23. }
  24.  
  25. // older versions of IE
  26.  
  27. else
  28. {
  29. viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
  30. viewportheight = document.getElementsByTagName('body')[0].clientHeight
  31. }
  32. document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
  33. //-->
  34. </script>

以上是关于获取浏览器视口宽度和高度的主要内容,如果未能解决你的问题,请参考以下文章

获取浏览器视口宽度和高度

JS获取浏览器中的各种宽高值

以跨浏览器的方式查找视口的确切高度和宽度(无 Prototype/jQuery)

字体大小基于视口宽度和高度

查找视口高度/宽度,交叉浏览器:

浏览器视口