探究客户端浏览器分辨率的自适应问题（如何使网站脚本自动适应客户端分辨率，我们经常遇到的问题的解决方案）
今天看到孟子老大的一篇E文，关于服务器端如何得知客户端浏览器分辨率的文章，经简化改为如下：
<%@ Page language="c#" EnableViewState = "false" debug="true" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>检测客户端显示器分辨率</title>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta content="检测客户端分辨率" name="Description">
<Script language="c#" runat="server">
void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
System.Web.UI.WebControls.Button Button1 = new System.Web.UI.WebControls.Button();
if(!IsPostBack)
{
System.Web.UI.HtmlControls.HtmlInputHidden btnW = new System.Web.UI.HtmlControls.HtmlInputHidden();
System.Web.UI.HtmlControls.HtmlInputHidden btnH = new System.Web.UI.HtmlControls.HtmlInputHidden();
Button1.ID = "Button1";
btnW.Name = "WidthPixel";
btnW.ID = "WidthPixel";
btnH.Name = "HeightPixel";
btnH.ID = "HeightPixel";
this.FindControl("browserpeek").Controls.Add(btnW);
this.FindControl("browserpeek").Controls.Add(btnH);
this.FindControl("browserpeek").Controls.Add(Button1);
string scriptString = "";
scriptString += "document.all.browserpeek.WidthPixel.value=window.screen.width;\r\n";
scriptString += "document.all.browserpeek.HeightPixel.value=window.screen.height;\r\n";
this.RegisterOnSubmitStatement("Meng", scriptString);
this.MyBody.Attributes.Add("onload", "document.all."+Button1.ClientID+".click();");
}
else
{
this.MyBody.Attributes.Remove("onload");
if(this.FindControl("browserpeek").Controls.Contains(Button1))
{
this.FindControl("browserpeek").Controls.Remove(Button1);
Button1.Dispose();
}
System.Text.StringBuilder strLabel = new System.Text.StringBuilder();
HttpBrowserCapabilities bc = Request.Browser;
strLabel.Append("您的浏览器的分辨率为：");
strLabel.Append(Request.Form["WidthPixel"]);
strLabel.Append("×");
strLabel.Append(Request.Form["HeightPixel"]);
Label1.Text = strLabel.ToString();
}
}
</Script>
</HEAD>
<body id="MyBody" runat="server">
<form id="browserpeek" runat="server" name="browserpeek">
<asp:label id="Label1" runat="server"></asp:label>
</form>
</body>
</HTML>
其原理是：当客户端打开网页时，自动点击“模拟按钮”，根据客户端浏览器的分辨率反馈给服务器后再由服务器返回。
现在我的目的是想将此脚本放在Global.asax的：
protected void Session_Start(Object sender, EventArgs e)
{
//就是这里了
}
让每个访问者一旦进入网站，首先检测一个Session["ScreenWidthPixel"]和Session["ScreenHeightPixel"]如果有此值，则不再做检测浏览器的步骤而直接进入自动适应的网页。否则进入浏览器的分辨率检测，然后将结果赋值给Session["ScreenWidthPixel"]和Session["ScreenHeightPixel"]。
问题来了：
1、如果有网页已经含<form runat="server" id="....">时，上述办法不可行。因为asp.net中只允许一个<form runat="server" ...>，按上述原理进行提交服务器的话，如果网页还有其他提交也必定造成负面影响。
2、还有一个办法，就是采用Server.Transfer或Response.Redirect("GetScreen.aspx")，但也会造成一定的负页影响，比如：需要返回原来页面的问题。
3、考虑使用IHttpHandler?
欢迎大家都来讨论讨论，一定都用得上。因为现在的浏览器类别实在太多了，需要找到一个较好的解决方案。
问题点数：20、回复次数：25Top
1 楼jack4811（5年以后...）回复于 2004-12-04 01:07:50 得分 5
用JS！代码如下
onclick=alert("你的显示分辩率为:"+screen.width+"×"+screen.height)
先做好几个页面，比如一个htm1.htm是800*600，一个是htm2.htm是1024*768的
然后在你的入口页面 index.htm 中判断：
<html>
<head>
<script language=javascript>
<!--
function mHref() {
if (screen.width == 1024) location.href = "htm2.htm";
else if (screen.width == 800) location.href = "htm1.htm";
else return(false);
}
//-->
</script>
</head>
<body onload="mHref();">
</body>
</html>Top
2 楼qixiao（七小)(Gadgets中文网http://www.gadgets.net.cn）回复于 2004-12-04 02:51:53 得分 0
学习Top
3 楼Miracle（新一代的开山怪）回复于 2004-12-04 04:39:24 得分 3
其实没那么麻烦的
1、制作一组css文件，分被用于在不同分辨率下的屏幕布局设置
2、根据css文件，设计页面布局
2、在页面加载过程中取得屏幕分辨率（上面已经贴了代码了），然后根据分辨率，重新设定页面严肃应该应用的css class。
这个过程中完全不需要服务器代码参与，没有post-back。Top
4 楼Miracle（新一代的开山怪）回复于 2004-12-04 04:40:53 得分 0
如果不会用css，本办法就是用jack4811的例子，有几种分辨率就搞几套页面，在引导页面里面检测分辨率，然后载入不同的页面版本。强烈不推荐，呵呵Top
5 楼Miracle（新一代的开山怪）回复于 2004-12-04 04:42:57 得分 2
更正一下，“重新设定页面严肃应该应用的css class”为“重新设定页面元素应该应用的css class”之误。
另外，要将最佳分辨率下的css模板设置为默认，这样的话可以大大减少重新应用style的可能性。Top
6 楼leo2003（【健者天行】谁伴我闯荡）回复于 2004-12-04 08:58:29 得分 0
markTop
7 楼johnsuna（缘来是e）回复于 2004-12-04 10:07:53 得分 0
楼上几位：
使用CSS不失为一个办法，就类似asp.net的Theme功能，这样做也会有困难：
如何根据分辨率加载不能的css文件呢？如果一个网站有非常多的页面时，每个文件都需要加入相应的分辨率判定和CSS引导的JavaScript
如果在服务器端采用IHttpHandler或者使用自定义控件，在客户端浏览文件前做出处理，然后由IIS自动处理岂不更好？
以下是我昨晚探索出来的结果，仍需要大力完善，欢迎大家继续探讨。
1、首先按照本贴开头的方法，建立一个GetScreen.aspx取得客户端分辨率并将之赋予Session["ScreenResolution"]，同时为了自动转向
在本贴开头所示代码中加入以下关键代码：
string w=Request.Form["WidthPixel"];//得到屏幕分辨率X
string h=Request.Form["HeightPixel"];//得到屏幕分辨率Y
Session["ScreenResolution"]=w+"*"+h;//赋值给Session
//转向（更多相关代码见下）
if(Session["UrlReferrer"]!=null)
{
Response.Redirect(Session["UrlReferrer"].ToString());
}
2、在Global.asax中：
<Script Runat="Server" Language="C#">
public static string strUrl;//用于取得用户刚进入时的页面链接
protected void Application_BeginRequest(Object sender,EventArgs e)
{
strUrl=Request.RawUrl.ToString();
}
protected void Application_EndRequest(Object sender, EventArgs e)
{
}
protected void Application_Start(Object sender, EventArgs e)
{
}
protected void Session_Start(Object sender, EventArgs e)
{
if (Session["ScreenResolution"] == null)
{
Response.Redirect("/GetScreen.aspx"); //如果未取得客户端浏览器分辨率，则定向到GetScreen.aspx，获取之。
}
Session["UrlReferrer"] = strUrl;//将最初请求页面放在Session中，以便在第1条所示代码中重定向
}
protected void Session_End(Object sender, EventArgs e)
{
}
</Script>
3、在需要做分辨率处理的页面中：
<Script language="c#" runat="server">
private string screenWidth;
void Page_Load(Object sender,EventArgs e)
{
if(Session["ScreenResolution"]!=null)
{
screenWidth=Session["ScreenResolution"].ToString().Split('*')[0].ToString();
}
}
</Script>
这里在<Body>区内作示例：
<body bgcolor="#0000FF" background="MyPicture<%=screenWidth%>.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">Top
8 楼johnsuna（缘来是e）回复于 2004-12-04 10:23:33 得分 0
优点：一次检测，多次使用。
缺点：需要客户端COOKIE的支持，因为使用了Session.
------------------------------------------
备注：
------------------------------------------
在上述示例中可以更简化一下，那就是:
在第1条中：
设置Session["ScreenResolutionX"]和Session["ScreenResolutionY"]：
Session["ScreenResolutionX"]=Request.Form["WidthPixel"];//得到屏幕分辨率X并赋值给Session
Session["ScreenResolutionY"]=Request.Form["HeightPixel"];//得到屏幕分辨率Y并赋值给Session
在第3条中直接在<Body>区内使用：
<body bgcolor="#0000FF" background="MyPicture<%=Session["ScreenResolutionX"].ToString()%>.gif" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
另外：检测分辨率的代码可以更简化一些：
//GetScreen.aspx(注：未做仔细调试)
<script runat="server" language="C#">
public void Page_Load(Object sender, EventArgs e)
{
if (Request.QueryString["action"] != null)
{
Session["ScreenResolutionX"] = Request.QueryString["resX"].ToString();
Session["ScreenResolutionY"] = Request.QueryString["resY"].ToString();
Session["ScreenResolutionD"] = Request.QueryString["resD"].ToString();
if(Session["UrlReferrer"]!=null)
{
Response.Redirect(Session["UrlReferrer"].ToString());
}
}
}
</script>
<HTML><BODY>
<script language="javascript">
res = "&resX="+screen.width+"&resY="+screen.height+"&resD="+screen.colorDepth;
top.location.href="GetScreen.aspx?action=set"+res;
</script>
</BODY></HTML>Top
9 楼yichuan1982（亦川——四川新津）回复于 2004-12-04 10:37:28 得分 1
一般就是按800*600，Top
10 楼thinhunan（THIN[MVP_asp.net]）回复于 2004-12-04 11:30:20 得分 2
用CSS的方式也行啊，
在页面Load时,Response.Write("<link...."+Css文件名+"...>")就行了Top
11 楼forideal（我心飞翔）回复于 2004-12-04 11:57:57 得分 2
这样你要做两种页面，工作量太大了。可以使用百分比定义网页中元素的宽度，这样就可以自适应分辩率了，不过很不好定位，不适用于大型或内容复杂的网页。所以还是建议你做一个页面，宽度不超过778像素就可以了，现在几乎所有的网站都是这样做的。Top
12 楼johnsuna（缘来是e）回复于 2004-12-04 18:04:50 得分 0
<Script language="c#" runat="server">
void Page_Load(Object sender,EventArgs e)
{
if(Session["ScreenResolutionX"] != null)
{
ScreenResolutionX.Text = Session["ScreenResolutionX"].ToString();
}
}
</Script>
</head>
<body bgcolor="#0000FF" background='BgPicture<asp:Literal runat="server" id="ScreenResolutionX" />.gif'>
其中<asp:Literal runat="server" id="ScreenResolutionX" />为客户端分辨率，现在服务器端已可以取得Session["ScreenResolutionX"]的值了，由于网站有很多页，所以有没有一种办法可以实现自动在Global.asax或web.config中采用IHttpHandler进行全站控制，而不用每个网页都使用上述代码。就好象UrlRewritter一样？
不知道Page_Load如何重载或者追加一个EventHandler?Top
13 楼ydsunny（在路上）回复于 2004-12-04 18:28:10 得分 3
都太麻烦，只要把所有的width属性都设成%模式的话无论什么分辩率都可以显示的很好Top
14 楼jack4811（5年以后...）回复于 2004-12-04 18:49:39 得分 0
继续学习。。。。Top
15 楼jack4811（5年以后...）回复于 2004-12-04 18:50:05 得分 0
小强很弓虽Top
16 楼johnsuna（缘来是e）回复于 2004-12-04 21:30:41 得分 0
小强：没有那么简单，有些图片方面的东西是不能与%号解决问题的。Top
17 楼gwallan（）回复于 2004-12-04 23:20:57 得分 1
好问题,大家继续探讨Top
18 楼johnsuna（缘来是e）回复于 2004-12-05 23:16:27 得分 0
http://blog.csdn.net/johnsuna/中会有进一步的结果，欢迎关注。Top
19 楼Erase（我不是共产党员）回复于 2004-12-05 23:26:39 得分 0
学习中Top
20 楼johnsuna（缘来是e）回复于 2004-12-07 10:32:49 得分 0
顶.........Top
21 楼lufree（荆州城公子三求计，博望坡军师初用兵）回复于 2004-12-16 11:33:53 得分 0
upTop
22 楼zjjszw（【湘：張家界】穿裤叉的蚊子【抵制日貨】）回复于 2005-02-15 14:47:42 得分 0
upTop
23 楼ld_thinking（懒得想）回复于 2005-02-15 14:56:13 得分 1
学习 但是觉得好的页面设计可以解决这一问题Top
24 楼fengyecsdn（幸福的屁颠颠~HOHO 最近事业爱情都顺利！加油）回复于 2005-02-15 16:21:24 得分 0
UUUUPPPPPTop
25 楼RedDuke（RedDuke）回复于 2005-02-18 11:29:56 得分 0
upTop
