网页自适应客户端分辨率问题
上一篇 /
下一篇 2006-11-09 12:08:49
/ 个人分类：技术世界
做适合不同分辨率的页 假设一个是800×600，一个是1024×768，一个是1280x960一缕阳光u9`%D
_v Y5oY Q W+q
首先我们要建立4个页面 index.html , index800x600.html , 一缕阳光\ j @M wb)| U;S
index1024x768.html , index1280x960.html
$O8ur Xm+]6o0用javascrīpt代码加在index.html页面代码<head>和</head>中，代码如下：
:R&GU\/L0<scrīpt language=Javascrīpt> 一缕阳光!RA7c"X*^0H0J"h
<!-- 一缕阳光l
M a&I~!Y
function redirectPage(){
+Zj$R K[:BK%}0 var url800x600="index800x600.html"; //定义四个页面，此处假设index.html,index800x600.html,index1024x768.html,index1280x960.html在同一个目录下 一缕阳光.~cpPa B(Z'ee
var url1024x768="index1024x768.html";
'TO)@p8a
p"z_!d0 var url1280x960="index1280x960.html"; 一缕阳光%Ni|'tp$s;J
if ((screen.width==800)&&(screen.height==600)) //在此处添加screen.width、screen.height的值可以检测更多的分辨率 一缕阳光 DTZ/s-s0~
window.location.href= url800x600;一缕阳光5v}MOb&L[7F/QH+a
else if ((screen.width==1024)&&(screen.height==768))
O%};?-R4c'Vz+MP0 window.location.href= url1024x768;
l:h b/[+R5v0 else if ((screen.width==1280)&&(screen.height==960))
X3R;H'z1\%V6T0 window.location.href= url1280x960;一缕阳光Cth&p B2aL
else window.location.href= url800x600;一缕阳光]'r,p f't'c
} 一缕阳光3Dsk~9{`.p g
//--> 一缕阳光 ]+H ]
KV\8L,z
</scrīpt>
CE M2P:nP{(Z0然后在<body ...>中加入onLoad="redirectPage()"
p'sI0iH u;hv0w0同样在<body>和</body>区域中加入以下代码来显示页面工作信息一缕阳光HQn4M_+Gv
<scrīpt language=Javascrīpt>
%]H X`4NlN b I:W0 <!-- 一缕阳光'Zx4QW,L
var w = screen.width 一缕阳光2xsV$n
~"[ H @
var h = screen.height
jm*A r8h:l#N0 document.write("系统已检测到您的分辨率为:");
1{N9KTX7n,Z0 document.write("<font size=3 color=red>");
8l)K)Ea#uU|X1X0 document.write(w+"X"+h); 一缕阳光$I }|W G
document.write("</font>"); 一缕阳光#w1\Ao8N&ZlC
document.write("正在进入页面转换,请稍候…");
7cL)fF b0 //-->
I.S6dq+q,q-S.g!e ?0 </scrīpt>
全文结束
相关阅读:
- 电脑出现蓝屏怎么办 (jiantian, 2006-11-09)
- 出现蓝屏后的九个常规解决方案 (jiantian, 2006-11-09)
- 经典蓝屏案意义破解(1-5) (jiantian, 2006-11-09)
- 经典蓝屏案意义破解(6-10) (jiantian, 2006-11-09)
- 经典蓝屏案意义破解(11-15) (jiantian, 2006-11-09)
- 经典蓝屏案意义破解(16-20) (jiantian, 2006-11-09)
- 经典蓝屏案意义破解(21-25) (jiantian, 2006-11-09)
- 经典蓝屏案意义破解(25-30) (jiantian, 2006-11-09)
- 经典蓝屏案意义破解(31-35) (jiantian, 2006-11-09)
- 经典蓝屏案意义破解(完) (jiantian, 2006-11-09)
导入论坛
收藏
分享给好友
推荐到圈子
管理
举报
TAG:
技术世界