当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件。这个事件在window(窗口)上面触发，因此可以通过JavaScript或者body元素中的onresize特性来指定事件处理程序。如前所述，我们还是推荐使用如下所示的JavaScript方式：

<script type="text/javascript">
(function(){
  var displayViewPortSize=null;

  function createDisplay(){
    if(displayViewPortSize==null){
      displayViewPortSize=document.createElement("div");
      displayViewPortSize.style.cssText="position:fixed;right:8px;bottom:8px;padding:10px;color:black;background-color:white;border:1px solid #ccc;font-family:Arial;";
      document.body.appendChild(displayViewPortSize);
    }
  }

  function calcPageSize(){
    var pageWidth=window.innerWidth,pageHeight=window.innerHeight;
    if(typeof pageWidth!="number"){
      pageWidth=document.documentElement.clientWidth;
      pageHeight=document.documentElement.clientHeight;
    }else{
      pageWidth=document.body.clientWidth;
      pageHeight=document.body.clientHeight;
    }
    return {"w":pageWidth,"h":pageHeight};
  }

  if(window.addEventListener){
    window.addEventListener("load",function(event){
      window.addEventListener("resize",function(event){
        createDisplay();
        var pageSize=calcPageSize();
        displayViewPortSize.innerHTML="pageWidth="+pageSize.w+" pageHeight="+pageSize.h;
      },false);
    },false);
  }else if(window.attachEvent){
    window.attachEvent("onload",function(event){
      window.attachEvent("onresize",function(event){
        createDisplay();
        var pageSize=calcPageSize();
        displayViewPortSize.innerHTML="pageWidth="+pageSize.w+" pageHeight="+pageSize.h;
      });
    });
  }
})();
</script>

与其他发生在window上的事件类似，在兼容DOM的浏览器中，传入事件处理程序中的event对象有一个target属性，值为document；而IE8及之前版本则未提供任何属性。关于何时会触发resize事件，不同浏览器有不同的机制。IE、Safari、Chrome和Opera会在浏览器窗口变化了1像素时就触发resize事件，然后随着变化不断重复触发。Firefox则只会在用户停止调整窗口大小时才会触发resize事件。由于存在这个差别，应该注意不要在这个事件的处理程序中加入大计算量的代码，因为这些代码有可能被频繁执行，从而导致浏览器反应明显变慢。浏览器窗口最小化或最大化时也会触发resize事件。