网页自动适应分辨率

寻找自动适应分辨率的网页脚本

解决方案 »

  1.   

    # IE：document.body.offsetWidth和document.body.offsetHeight。注意：此时页面一定要有body标签。   
    # FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。   
    # 通用：document.body.clientWidth和document.body.clientHeight。 or
    screenLeft
    screenTop
      

  2.   

    JS判断显示器不同的分辨率显示不同的页面<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    </head>
    <style type="text/css">
    div{font-family:verdana; font-size:12px; padding:2px; margin:5px; border:1px solid red; height:30px;}
    </style>
    <script type="text/javascript">
    function selectScreen(){
    var w,h;
    srn_w=screen.width;
    srn_h=screen.height;
    if(srn_w == 1024 && srn_h == 768){
    alert("Screen 宽 : " + srn_w+"\nScreen 高 : "+srn_h+"\n显示比例模型 4 : 3");
    //window.location = a.htm；      //go and display a page here 
    }else if(srn_h == 768 && srn_w != 1024 ){
    alert("Screen 宽 : " + srn_w+"\nScreen 高 : "+srn_h+"\n显示比例模型不是 4 : 3(可能是宽屏16:9)");
    //window.location = b.htm；      //go and display a page here 
    }else if(srn_w == 800 && srn_h == 600){
    alert("Screen 宽 : " + srn_w+"\nScreen 高 : "+srn_h+"\n显示比例模型 4 : 3");
    //window.location = c.htm；     //go and display a page here 
    }else if(srn_h == 600 && srn_w != 800 ){
    alert("Screen 宽 : " + srn_w+"\nScreen 高 : "+srn_h+"\n显示比例模型不是 4 : 3(可能是宽屏16:9)");
    //window.location = d.htm；      //go and display a page here 
    }else{
    alert("other\n Screen 宽 : " + srn_w+"\nScreen 高 : "+srn_h+"\n显示比例模型不清楚");
    //window.location = e.htm;     //go and display a page here 
    }
    }
    selectScreen();
    </script>
    <body>
    <br>
    <br>
    判断浏览起分辨率显示相应的页面...
    </body>
    </html>
      

  3.   

    针对具体的网页,绝不是仅依靠JS就可以的,还要注意CSS的写法(除非你有工夫象上面有位朋友提供的那样,针对每种分辨率分别去设计一个相应的页面).CSS写好了,不需要JS也可以适应不同分辨率.
    具体的可以找下DIV布局参考文章.
      

  4.   

    这个问题比较深奥了。一般通过css加div能解决页面大小适应性问题，以我个人不深的经验，使用position：absolute|relative，top，left，right，bottom.....确定页面整体框架，然后内部用百分比。
    当然还要有很多设计技巧，我也在不断探索中...
      

  5.   

    比较通用的就是div+css布局了！宽度按百分比来布！
      

  6.   

    这个思想我顶，我现在也强烈建议他们用DIV+CSS
      

  7.   


    JS判断显示器不同的分辨率显示不同的页面
    HTML code<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/ht……