怎样用JS实现根据客户机的分辨率的不同显示不同的HTML内容？

     比如说，有一个top.html文件，当分辨率为800×600时，显示<table name＝"table1">...</table>的HTML内容，当分辨率为1024×768时，显示<table name="table2">...</table>的HTML内容，这样应该怎样使用JavaScript语句来实现这个功能，而且需要在一个HTML文件中实现。请各位前辈高手多多指教，小弟不胜感激！

解决方案 »

  1.   

    控制样式就行了~~多用比例型参数~~
    比如：width="100%" 自适应大小
      

  2.   

    奇怪的要求
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>例子</title>
    <script type="text/javascript">
    //function klass(){
    //    this.a.apply(this,arguments);
    //}
    //klass.prototype.a = function(){};
    //var test = new klass("a","b");
    //alert(test.a);
    window.onload = function(){
        if(window.screen.width == "800" && window.screen.height == "600")
        {
            document.getElementById("a").style.display = "block";
            document.getElementById("b").style.display = "none";
        }
        else if (window.screen.width == "1024" && window.screen.height == "768")
        {
            document.getElementById("a").style.display = "none";
            document.getElementById("b").style.display = "block";
        }
    }
    </script>
    </head>
    <body>
    <table id="a"><tr><td>aaaaaaaaaa</td></tr></table>
    <table id="b"><tr><td>bbbbbbbbbb</td></tr></table>
    </body>
    </html>
      

  3.   


    <!DOCTYPE   html   PUBLIC   "-//W3C//DTD   XHTML   1.0   Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html   xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title> 例子 </title> 
    <script   type="text/javascript"> 
    window.onload   =   function(){ 
            if(window.screen.width   ==   "800"   &&   window.screen.height   ==   "600") 
            { 
                    document.getElementById("a").style.display   =   "block"; 
                    document.getElementById("b").style.display   =   "none"; 
            } 
            else   if   (window.screen.width   ==   "1024"   &&   window.screen.height   ==   "768") 
            { 
                    document.getElementById("a").style.display   =   "none"; 
                    document.getElementById("b").style.display   =   "block"; 
            } 
    } 
    </script> 
    </head> 
    <body> 
    <table   id="a"> <tr> <td> aaaaaaaaaa </td> </tr> </table> 
    <table   id="b"> <tr> <td> bbbbbbbbbb </td> </tr> </table> 
    </body> 
    </html> 
      

  4.   

    回楼上的zhengshaodong：您说的这个方法可以，但是有一个问题，我通过JS和table的id属性选择的表格中的内容不是文字而是不同的图片，因此会有一定的延迟，这样就产生了问题：当打开页面时，首先两个图片都会显示，然后一个图片才能消失，但是感觉这样的效果不太好，不知道有没有其他的解决方法？谢谢！
      

  5.   

    这样啊，想多了刚才晕
    那楼主这样看看
    <script language="javascript">if (document.readyState=="complete")
    {
              AdjustImageSize();
    }
    else
    {
              document.onreadystatechange = function()
            {
               
                    if (document.readyState == "complete")
                    {
                              AdjustImageSize();
                      }
              }
    }
    AdjustImageSize()就是根据分辨率判断的事件
      

  6.   


    <img src="&#31616;&#20171;MENU3.jpg" width="243" height="161" id="cc">
    <script language="javascript">
    if (document.readyState=="complete")
    {
              init();
    }
    else
    {
              document.onreadystatechange = function()
            {
               
                    if (document.readyState == "complete")
                    {
                              init();
                      }
              }
    }
    function init(){
    o = document.getElementsByTagName("IMG")      
        for(i=0;i <o.length;i++)      
        if(o[i].width> 100 )       o[i].width=500       
    }</script>