探究客户端浏览器分辨率的自适应问题(如何使网站脚本自动适应客户端分辨率)
2008-01-11 14:34
537 查看
引自:http://blog.csdn.net/johnsuna/archive/2004/12/04/204253.aspx
<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>
或者CSS方式(感谢Miracle(新一代的开山怪) )
1、制作一组css文件,分被用于在不同分辨率下的屏幕布局设置
2、根据css文件,设计页面布局
2、在页面加载过程中取得屏幕分辨率(上面已经贴了代码了),然后根据分辨率,重新设定页面元素应该应用的css class。
这个过程中完全不需要服务器代码参与,没有post-back。
另外,要将最佳分辨率下的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>
<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>
或者CSS方式(感谢Miracle(新一代的开山怪) )
1、制作一组css文件,分被用于在不同分辨率下的屏幕布局设置
2、根据css文件,设计页面布局
2、在页面加载过程中取得屏幕分辨率(上面已经贴了代码了),然后根据分辨率,重新设定页面元素应该应用的css class。
这个过程中完全不需要服务器代码参与,没有post-back。
另外,要将最佳分辨率下的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>
相关文章推荐
- 探究客户端浏览器分辨率的自适应问题(如何使网站脚本自动适应客户端分辨率)(1)
- 探究客户端浏览器分辨率的自适应问题(如何使网站脚本自动适应客户端分辨率)(3)
- 探究客户端浏览器分辨率的自适应问题(如何使网站脚本自动适应客户端分辨率)(2)
- 如何解决网站页面CSS、JS脚本在浏览器的缓存问题
- 背景图片自适应分辨率浏览器大小自动拉伸全屏代码
- 子元素用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题
- 网页自适应客户端显示器分辨率问题 汇总(1)
- 如何解决火狐和谷歌等浏览器自动记住用户名和密码的问题
- 朋友的一个问题:Linux开机如何自动运行自己编写好的shell脚本
- Unity3D脚本:摄像机自动适应所有分辨率代码
- 背景图片自适应分辨率浏览器大小自动拉伸全屏代码
- web开发中客户端脚本产生的浏览器缓存问题
- 关闭浏览器再打开,网站是否应该自动登录以及如何实现呢?
- 绝对酷,如何解决asp.net中javascript脚本的问题(使用服务器控件执行客户端脚本)
- Unity3D脚本:摄像机自动适应所有分辨率代码
- 绝对酷,如何解决asp.net中javascript脚本的问题(使用服务器控件执行客户端脚本)
- 网站开发时,如何禁用Chrome谷歌浏览器自动保存密码的提示?
- 子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题
- 解决网页自适应客户端分辨率问题
- CSS背景图片自适应 根据浏览器分辨率大小自动伸缩