如何让网站适各种分辨率的浏览器.docx
- 文档编号:9349555
- 上传时间:2023-02-04
- 格式:DOCX
- 页数:10
- 大小:19.62KB
如何让网站适各种分辨率的浏览器.docx
《如何让网站适各种分辨率的浏览器.docx》由会员分享,可在线阅读,更多相关《如何让网站适各种分辨率的浏览器.docx(10页珍藏版)》请在冰豆网上搜索。
如何让网站适各种分辨率的浏览器
第一种方法:
做一个网页解决问题(长了点)
如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的网页变得"面目全非",那多令人沮丧!
下面我们以网页爱好者的常用工具Dreamweaver(以下简称DW)为例,列出几个网页制作初学者较常见的网页布局问题以及解决方法,希望对初学者们有所帮助。
一、消除任意缩放浏览器窗口对网页的影响
一番辛苦做出来的网页,在全屏状态下浏览一切正常。
但在改变浏览窗口大小之后,网页就变得"不堪入目"了,这是个很值得注意的问题。
问题的根源还得从网页的布局说起,在DW中,网页内容的定位一般是通过表格来实现的,解决表格的问题也就成功了大半。
大家应该注意到,在DW中表格属性面板的高宽设定选择上提供了两种不同类型:
百分比和像素值。
百分比的使用将会产生前面说到的那个毛病。
这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比,如在一个表格单元的宽度是600,在它里面嵌入了另外一个表格,表格宽度占表格单元的50%,则这个表格的宽度为300,依此类推,如果在一个表格不是嵌于另一个表格单元中,则其百分比是相对于当时窗口的宽度的。
IE浏览器中,随便改动主页窗口的大小时,表格的内容也随之错位、变形,就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。
自然,解决这个问题的办法就是将表格宽度设置成固定宽度(也就是像素值)。
另外如果外层表格已做好固定宽度设置,内层表格也可以适当使用百分比设置。
清楚这个原则以后,如果出现类似的问题大家也知道怎么解决。
二、让网页居中
说到了窗口大小就会顺着路子想到分辨率的问题,在800×600分辨率下制作的网页在1024×768分辨率的机器上打开,整个网页就会跑到左边;1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。
两种分辨率各做一个吧?
做起来费时,看起来也费劲。
怎么办呢?
现在大多数网民都还在用800*600的分辨率,所以我们一般可以以此分辨率为主,要想让网页在1024*768时居中,只要在网页原代码的
后紧加一句不过有几个问题这是要注意一下,第一个就是上面说到的百分比的问题,表格、单元格的宽度单位最好要使用像素单位,而不要用百分比。
例如width=770。
如果你的表格宽度设的是百分比,那么使用大于800×600的像素时,网页就会拉宽,这样网页可能会变形。
在
中加入leftmargin=0,即还有一点要注意的是不能用DW中的层来定位。
三、定义固定大小的文字
大家都知道,在IE浏览器的功能设置中,有一个可以自由设置窗口内容字体大小的功能,这样由于不同访问者的设置习惯不同,呈现在他们面前的网页有时也会不不相同。
比如你可能本来设计时用的是2号字体,结果由于用户对浏览器的额外设定,变的更大了,这时你的网页也可能变得"不堪入目"。
虽然不是你的错,但客户是上帝。
如果使用了网页中的CSS样式表技术,就不会出现上述情况了。
使用快捷键"Shift+F11"打开样式表"CSSstyle"编辑器,在窗口中单击鼠标右键执行"NewCSSstyle..."命令新建一个样式表,然后在给出的列表中选择"类型"选项,定义文字属性参数(一般文字的大小选择12px较为适宜)。
完成后选择网页编辑窗中的文本,单击新的样式表名称,可以看到选中的文本发生了变化。
预览时试试定义的文本字体尺寸还会不会随浏览器的选择字体大小而改变。
四、让网页适应不同的浏览器
浏览器的格局现在是两分天下,一分是IE,另一分是NetScape,在国内Ie有绝对的占有率,在这种情况下我们设计的网页只要兼容它就行了,但NetScape在国外还是有很多人使用,毕竟它是浏览器的元老。
虽然没有办法做出让所有浏览器都兼容的网站,但只要注意以下几点,做出来的网页在各个浏览器都中能达到比较好的显示效果:
不要混合使用层和表格排版,如果是父子关系,如层中表格,不在此原则范围内。
内联式的CSS在NetscapeNavigator中经常会出现问题,使用链式或内嵌式。
有时需要在空层插入表格或者透明图片,以保证在NetscapeNavigator里的效果。
对于只有几个像素宽度或高度的层,改用图片来实现。
避免使用W3C组织不推荐的排版属性,用CSS代替。
第二种方法:
做两个适合不同分辨率的页面
一个是800×600,一个是1024×768,在800×600的页面中加入一下代码就可以实现跳转了:
---------------------------------------------------------------
解决分辨率问题在Dreamweaver中没有此项功能,我们只能手动加入一段Javascript代码。
首先在change-ie.html或change-nc.html页面代码中的
和中加入以下代码:--
functionredirectPage(){
varurl800x600=〃index-ie.html〃;//定义两个页面,此处假设index-ex.html和1024-ie.html同change-ie.html在同一个目录下
varurl1024x768=〃1024-ie.html〃;
if((screen.width==800)&&(screen.height==600))//在此处添加screen.width、screen.height的值可以检测更多的分辨率
window.location.href=url800x600;
elseif((screen.width==1024)&&(screen.height==768))
window.location.href=url1024x768;
elsewindow.location.href=url800x600;
}
//-->
然后再在
内加入onLoad=〃redirectPage()〃最后,同样地,在
和之间加入以下代码来显示网页的工作信息:--
varw=screen.width
varh=screen.height
document.write(〃系统已检测到您的分辨率为:
〃);
document.write(〃
document.write(w+〃×〃+h);
document.write(〃〃);
document.write(〃正在进入页面转换,请稍候…〃);
//-->
探究客户端浏览器分辨率的自适应问题(如何使网站脚本自动适应客户端分辨率)
(2)
有人建议直接使用JavaScript方式(感谢):
--
functionmHref(){
if(screen.width==1024)location.href="htm2.htm";
elseif(screen.width==800)location.href="htm1.htm";
elsereturn(false);
}
//-->
或者CSS方式(感谢)
1、制作一组css文件,分被用于在不同分辨率下的屏幕布局设置
2、根据css文件,设计页面布局
2、在页面加载过程中取得屏幕分辨率(上面已经贴了代码了),然后根据分辨率,重新设定页面元素应该应用的cssclass。
这个过程中完全不需要服务器代码参与,没有post-back。
另外,要将最佳分辨率下的css模板设置为默认,这样的话可以大大减少重新应用style的可能性。
使用CSS不失为一个办法,就类似的Theme功能,这样做也会有困难:
如何根据分辨率加载不能的css文件呢?
如果一个网站有非常多的页面时,每个文件都需要加入相应的分辨率判定和CSS引导的JavaScript
如果在服务器端采用IHttpHandler或者使用自定义控件,在客户端浏览文件前做出处理,然后由IIS自动处理岂不更好?
以下是我昨晚探索出来的结果,仍需要大力完善,欢迎大家继续探讨。
1、首先按照本贴开头的方法,建立一个GetScreen.aspx取得客户端分辨率并将之赋予Session["ScreenResolution"],同时为了自动转向
在本贴开头所示代码中加入以下关键代码:
stringw=Request.Form["WidthPixel"];//得到屏幕分辨率X
stringh=Request.Form["HeightPixel"];//得到屏幕分辨率Y
Session["ScreenResolution"]=w+"*"+h;//赋值给Session
//转向(更多相关代码见下)
if(Session["UrlReferrer"]!
=null)
{
Response.Redirect(Session["UrlReferrer"].ToString());
}
2、在Global.asax中:
publicstaticstringstrUrl;//用于取得用户刚进入时的页面链接
protectedvoidApplication_BeginRequest(Objectsender,EventArgse)
{
strUrl=Request.RawUrl.ToString();
}
protectedvoidApplication_EndRequest(Objectsender,EventArgse)
{
}
protectedvoidApplication_Start(Objectsender,EventArgse)
{
}
protectedvoidSession_Start(Objectsender,EventArgse)
{
if(Session["ScreenResolution"]==null)
{
Response.Redirect("/GetScreen.aspx");//如果未取得客户端浏览器分辨率,则定向到GetScreen.aspx,获取之。
}
Session["UrlReferrer"]=strUrl;//将最初请求页面放在Session中,以便在第1条所示代码中重定向
}
protectedvoidSession_End(Objectsender,EventArgse)
{
}
3、在需要做分辨率处理的页面中:
privatestringscreenWidth;
voidPage_Load(Objectsender,EventArgse)
{
if(Session["ScreenResolution"]!
=null)
{
screenWidth=Session["ScreenResolution"].ToString().Split('*')[0].ToString();
}
}
这里在
区内作示例:优点:
一次检测,多次使用。
缺点:
需要客户端COOKIE的支持,因为使用了Session.
------------------------------------------
备注:
------------------------------------------
在上述示例中可以更简化一下,那就是:
在第1条中:
设置Session["ScreenResolutionX"]和Session["ScreenResolutionY"]:
Session["ScreenResolutionX"]=Request.Form["WidthPixel"];//得到屏幕分辨率X并赋值给Session
Session["ScreenResolutionY"]=Request.Form["HeightPixel"];//得到屏幕分辨率Y并赋值给Session
在第3条中直接在
区内使用:另外:
检测分辨率的代码可以更简化一些:
//GetScreen.aspx(注:
未做仔细调试)
publicvoidPage_Load(Objectsender,EventArgse)
{
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());
}
}
}
res="&resX="+screen.width+"&resY="+screen.height+"&resD="+screen.colorDepth;
top.location.href="GetScreen.aspx?
action=set"+res;
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 如何 网站 各种 分辨率 浏览器