探究客户端浏览器分辨率的自适应问题（如何使网站脚本自动适应客户端分辨率，我们经常遇到的问题的解决方案）

今天看到孟子老大的一篇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?欢迎大家都来讨论讨论，一定都用得上。因为现在的浏览器类别实在太多了，需要找到一个较好的解决方案。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

用JS！代码如下
onclick=alert("你的显示分辩率为:"+screen.width+"×"+screen.height)
先做好几个页面，比如一个htm1.htm是800*600，一个是htm2.htm是1024*768的
然后在你的入口页面 index.htm 中判断：
<html>
<head>
<script language=javascript>

</script>
</head>
<body onload="mHref();">
</body>
</html>
其实没那么麻烦的
1、制作一组css文件，分被用于在不同分辨率下的屏幕布局设置
2、根据css文件，设计页面布局
2、在页面加载过程中取得屏幕分辨率（上面已经贴了代码了），然后根据分辨率，重新设定页面严肃应该应用的css class。
这个过程中完全不需要服务器代码参与，没有post-back。
如果不会用css，本办法就是用jack4811的例子，有几种分辨率就搞几套页面，在引导页面里面检测分辨率，然后载入不同的页面版本。强烈不推荐，呵呵
更正一下，“重新设定页面严肃应该应用的css class”为“重新设定页面元素应该应用的css class”之误。另外，要将最佳分辨率下的css模板设置为默认，这样的话可以大大减少重新应用style的可能性。
楼上几位：
使用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">
优点：一次检测，多次使用。
缺点：需要客户端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>
用CSS的方式也行啊，
在页面Load时,Response.Write("<link...."+Css文件名+"...>")就行了
<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?
都太麻烦，只要把所有的width属性都设成%模式的话无论什么分辩率都可以显示的很好
http://blog.csdn.net/johnsuna/中会有进一步的结果，欢迎关注。