目前使用小分辨率的大分辨率的人都有不少，为了适应各种不同分辨率显示器的人群，把论坛的分辨率调为分辨率大于1280的使用固定模式，比如1920分辨率的显示器，显示论坛的主体表格宽度即为1280，从而避免两边留白太多，也避免拉伸过宽不方便阅读的情况。而小于1280显示器则可以使用百分比，从而避免出现需要左右横拉的情况。
比如这个论坛就做到了：http://www.audiobar.net
我自己的论坛是http://bbs.xiege.net 目前使用的是固定的分辨率。
我在网上搜索了一下，要实现上述功能，需要修改模板文件，其中在网上有几条类似功能的代码，问题是对这些代码的功能方面了解不多，不知应该如何修改，以及应该放到模板的哪个文件，特此在这里向论坛里的大大求助。我的模板是使用官方的greenwall。我相信这个应该也有不少朋友需要的，请大大们不吝赐教。在下就此谢过。
第一段类似的，它实现的是当大于1024时按照百分比来，当小于1024时按照固定像素
- <html>
- <head>
- </head>
- <body onResize="reSizeDiv()">
- <div id="d1" style="width:400px;height:400px;background-color:lightblue;"></div>
- <SCRIPT>
- reSizeDiv();
- function reSizeDiv()
- {
- var s = document.body.offsetWidth; //(带浏览器边框的宽度)
- //var s = document.body.clientWidth; //(不带浏览器边框的宽度)
- if(isFirefox=navigator.userAgent.indexOf("Firefox")>0)
- s=window.innerWidth;
- var a = 1024; //要变换的临界点
- var w = "400px"; //DIV宽度（像素）
- var w1 = "40%"; //DIV宽度（百分比）
- var d = document.getElementById("d1");
- if(s > a)
- {
- d.style.width = w1;
- d.innerHTML = "DIV宽：width="+w1+"<br>DIV高：height=400px<br>当前窗口宽：Width="+s+"px";
- }
- else
- {
- d.style.width = w;
- d.innerHTML = "DIV宽：width="+w+"<br>DIV高：height=400px<br>当前窗口宽：Width="+s+"px";
- }
- }
-
- </SCRIPT>
- </body>
- </html>
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <script type="text/javascript">
- window.onload = function()
- {
- document.getElementById("container").style.width = window.screen.width > 1024 ? "80%" : "800px";
- }
- </script>
- </head>
- <body>
- <div id="container" style="background:#09f;">Hello<div>
- </body>
- </html>
- if(window.screen.width > 1024)
- {
- document.getElementById("container").style.width="100%";
- }
- else
- {
- document.getElementById("container").style.width="1024px";
- }
- ===============
- ps:
- 在javascript中得到当前窗口的高和宽
- <body><SCRIPT LANGUAGE="JavaScript">
- var s = "";
- s += "\r\n网页可见区域宽："+ document.body.clientWidth;
- s += "\r\n网页可见区域高："+ document.body.clientHeight;
- s += "\r\n网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)";
- s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
- s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
- s += "\r\n网页正文全文高："+ document.body.scrollHeight;
- s += "\r\n网页被卷去的高："+ document.body.scrollTop;
- s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
- s += "\r\n网页正文部分上："+ window.screenTop;
- s += "\r\n网页正文部分左："+ window.screenLeft;
- s += "\r\n屏幕分辨率的高："+ window.screen.height;
- s += "\r\n屏幕分辨率的宽："+ window.screen.width;
- s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
- s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
- s += "\r\n你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
- s += "\r\n你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
- alert(s);
- </SCRIPT>
- 既判断浏览器，也判断分辨率
- 程序代码
- <SCRIPT LANGUAGE="JavaScript">
- <!--
- if (window.navigator.userAgent.indexOf("MSIE")>=1)
- {
- var IE1024="";
- var IE800="";
- var IE1152="";
- var IEother="";
- ScreenWidth(IE1024,IE800,IE1152,IEother)
- }else{
- if (window.navigator.userAgent.indexOf("Firefox")>=1)
- {
- //如果浏览器为Firefox
- var Firefox1024="";
- var Firefox800="";
- var Firefox1152="";
- var Firefoxother="";
- ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother)
- }else{
- //如果浏览器为其他
- var Other1024="";
- var Other800="";
- var Other1152="";
- var Otherother="";
- ScreenWidth(Other1024,Other800,Other1152,Otherother)
- }
- }
- function ScreenWidth(CSS1,CSS2,CSS3,CSS4){
- if ((screen.width == 1024) && (screen.height == 768)){
- setActiveStyleSheet(CSS1);
- }else{
- if ((screen.width == 800) && (screen.height == 600)){
- setActiveStyleSheet(CSS2);
- }else{
- if ((screen.width == 1152) && (screen.height == 864)){
- setActiveStyleSheet(CSS3);
- }else{
- setActiveStyleSheet(CSS4);
- }}}
- }
- function setActiveStyleSheet(title){
- document.getElementsByTagName("link")[0].href="style/"+title;
- }
- //-->
- </SCRIPT>
- 解释：
- var IE1024="";
- var IE800="";
- var IE1152="";
- var IEother="";
- 引号里面分别填写，用户使用IE的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.
- var Firefox1024="";
- var Firefox800="";
- var Firefox1152="";
- var Firefoxother="";
- 引号里面分别填写，用户使用FF的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.
- var Other1024="";
- var Other800="";
- var Other1152="";
- var Otherother="";
- 引号里面分别填写，用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.
- 不判断分辨率，只判断浏览器
- 程序代码
- <SCRIPT LANGUAGE="JavaScript">
- <!--
- if (window.navigator.userAgent.indexOf("MSIE")>=1)
- {
- //如果浏览器为IE
- setActiveStyleSheet("default.css");
- }else{
- if (window.navigator.userAgent.indexOf("Firefox")>=1)
- {
- //如果浏览器为Firefox
- setActiveStyleSheet("default2.css");
- }else{
- //如果浏览器为其他
- setActiveStyleSheet("newsky.css");
- }
- }
- function setActiveStyleSheet(title){
- document.getElementsByTagName("link")[0].href="style/"+title;
- }
- //-->
- </SCRIPT>
- 解释：
- 如果浏览器为IE，则调用default.css
- 如果浏览器为Firefox，则调用default2.css
- 如果浏览器为其他，则调用newsky.css
- 用法：
- 放在
- </head>前面即可。
- <script LANGUAGE="JavaScript">
- function redirectPage() {
- var url640x480 = "default-2.htm";
- var url800x600 = "default-2.htm";
- var url1024x768 = "default-1.htm";
- if ((screen.width == 640) && (screen.height == 480))
- window.location.href= url640x480;
- else if ((screen.width == 800) && (screen.height == 600))
- window.location.href= url800x600;
- else if ((screen.width == 1024) && (screen.height == 768))
- window.location.href= url1024x768;
- else window.location.href= url1024x768;
- }
- </script>
|
置顶卡
喧嚣卡
变色卡
千斤顶
显身卡