网页在不同分辨率下的兼容性问题浅析

摘要：网页是现代信息传播的媒体，对于一个网站终端的开发设计者 ，网页在不同客户机上的显示美观度直接影响着信息传播的有效性，为了让大多用户都能看到比较完美的网页界面，网页制作者，总需要考虑更多的技术和一些相关问题。由于目前市场上的显示器尺寸繁杂、分辨率不统一、不同浏览器兼容性等诸多问题，同一个网页有时在不同环境下会呈现出不同的效果，进而影响网站设计效果和整体美观。本文就网站开发设计中出现的网页在不同的分辨率下的兼容性问题提出分析和一些解决方案。

关键词：网页；分辨率；兼容性

中图分类号：TP393.092 文献标识码：A 文章编号：1007-9599 （2013） 01-0202-02

1 前言

目前市场上的显示器尺寸繁杂、分辨率不统一、不同浏览器兼容性等诸多问题，同一个网页有时在不同环境下会呈现出不同的效果，进而影响网站设计效果和整体美观。本文就网站开发设计中出现的网页在不同的分辨率下的兼容性问题提出分析和一些解决方案。

2 网页在不同分辨率下的一致性问题

经过我们精心构思和制作，整个网页都基本完成了，这时候我们也可以舒口气，在浏览器下面看我们多日的成果了。因为整个页面是在分辨率为1024×768的条件下做出来的，这样在1024×768的分辨率下，页面基本是满屏的。因为页面是1023×639。可是当分辨率切换在800×600时，出现在我们面前的就不再是刚好满屏的页面了。当时并没有注意这个问题，因为过分注意网页的整体构思和创意，因为主页是需要两个渐变月牙的相对对称，中间也需要图片和文字的填充和点缀的。所以整个页面也设计的相对而言是较大的。可是网页不是只做个自己看的，我们不希望辛辛苦苦做出的网页在别人的机子上，因为分辨率的不同而出现排版乱七八糟，在别人的浏览器上好像基因突变似的面目全非，看不到我们当初精心设计的页面和构思的创意。

可是页面已经做出来了，而且整个页面是用大量的图片拼接而成的，这些图片也是在FireworksMX中精心设计制作的。如果要把页面改变为800×600的标准，这些图片是不能用了，页面的构造也得重新选择，也就是说以前的努力都得重新开始。所以说在制作网页的时候，整体规划是很重要的，一般都为了照顾800×600的分辨率标准，把页面设置宽度为780的，这样显示的时候，页面是恰好满屏的，也不会出现左右滚动条。而且用800×600分辨率做出的网页一是减少了不少工作量，还有利于内容的集中。

不过这样也是相当浪费时间和精力的。那么我们能否找到一种方法使页面的大小也随着分辨率的不同改变呢？这也涉及到HTML代码的编程问题， 但这样的设计需要在没有大量图片的页面中进行，因为网页的大小改变了，图片不会改变，这样会再次出现图片重叠的问题。如果用代码来解决，又得考虑具体图片随分辨率的改变而改变，问题会变的更复杂。

在1024×768分辨率下做出的页面会在800×600分辨率下变形，那么在800×600分辨率的标准下做出的网页在1024×768下是否也是面目全非呢？于是特意切换了一下屏幕的分辨率，找了几个不同的网页来浏览，发现也有网页出现错位，左对齐的情况出现。在800×600分辨率下动手做了一个简单的网页，只有基本的框架，简单的文字图片，在不同的浏览器下浏览，很快发现上面提到的问题。在寻找解决问题的方法时，看到有的网页在不同的浏览器下效果却是完美的，比如新浪网，在800×600分辨率下是满屏的，而在1024×768分辨率下是居中的，两边是空白的，也并不失美观。这儿就想到网页在不同分辨率下的兼容。几番周折，才发现原来是网页在制作中的居中。那么，如何让我们制作的网页内容在不同分辨率下都能居中显示呢？其实只需要在…var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-22575914-1']);_gaq.push(['_setDomainName', '']);_gaq.push(['_trackPageview']);(function () {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();var _userid = '';var _siteid =708;var _istoken = 1;var _model = 'Model03'; WebPageSpeed =484; UrchinTrack();之间加个 即可，具体代码如下：

注意：使用此方法后，表格单元格、DIV里的内容也会自动居中。因此需要分别为他们设置对齐方式。

原文链接：http：///news_list.asp？id=8 09而且我用的是表格定位，这样问题相对好解决，只要把最外边的水平局中即可，如果处理不好单元格，就把最外边的的width设成"768"[针对800×600而言] ，这样网页在800×600下满屏，在1024×768下就水平局中了，如果想在1024×768下也满屏，只要把最外边的的width设成"100%" 就可。要强调的一点就是在设置表格的宽度，长度，高度时最好都用象素，不要用百分比，这样一般网页不会拉伸，也不会变形。也同时想到一个让网页随分辨率兼容时让系统自动变更以适应的代码：