网页自适应屏幕分辨率

这是我写的一段让网页自适应屏幕分辨率的代码。贴出来,欢迎补充。

/**

*让网页元素自适应所有的分辨率的脚本
*作者:wikies    [email protected]

*时间:2014.02.05

*/
/**
*包说明:
*应用背景:目前的网页在各个分辨率下显示都正常的通常做法是:定义一个居中的固定宽度的div(响应式布局类似),然后两边留白。但是对于要求充满整个屏幕的网页,
*这样的方法就不能够满足了。对于充满整个屏幕的网页,需要根据不同大小的的屏幕来改变网页元素的大小,同时保证网页元素的比例(宽度和高度的比)不能变。
*设计思路:1 首先在一个显示器下开发好页面。这个页面是你已经完全可以适应的,假设我的开发宽度*高度是1440*870。
*        2 获取设备的工作区域的宽度和高度。求得一个比例 var R = srcWidth/W0>srcHeight/H0?srcHeight/H0:srcWidth/W0;
*        3 根据这个比例,遍历所有的网页元素,按照比例R改变它的布局属性
*        4 需要注意的是,font属性是一个默认继承的属性,需要显示的在css文件的头部设置每个元素的font属性,否则在没有显示设置的情况下,我们在
*          循环遍历重设置font的时候,元素的字体大小会被累乘以系数R
*        5 修正系数Correction。显示器的分辨率的宽高比例常见的有4:3 16:9等。我们根据在不同的显示比例下,系数R需要乘以一个Correction作为比例修正
*          做到更精确的自适应。
*/
/**
*网页分辨率自适应
 在父页面,采用fitHTML("div"),fitHTML("img"),fitHTML("table"),fitHTML("*")
 在ajax调用的子页面,规定!body后面紧跟着就是一个div。如果它的id是"root"它没有兄弟节点,它是这个页面所有节点的根节点,那么用fitHTML("#root");
*/
function fitHTML(Tag){
var W0 = 1440;//开发页面的显示器工作区域的宽度
var H0 = 870; //开发页面的显示器工作区域的高度
var srcWidth = window.screen.availWidth;
    var srcHeight = window.screen.availHeight;
    var R = srcWidth/W0>srcHeight/H0?srcHeight/H0:srcWidth/W0;
    var obj = null;
    var elements = ["div","img","table"];
    if(Tag.indexOf("#")>-1){//传递过来的id
    obj = $(Tag).find("*");
    fix(obj,R);
    }
    else{
    if(Tag=="*"){
    for(var i=0;i     obj = $(elements[i]);
    fix(obj,R);
    }
    }
    else{
    obj = $(Tag);
    fix(obj,R);
    }
    }
    
}


function fix(obj,R){
 for(var i = 0;i         var width = null;
    if($(obj[i]).css("width")=="auto"){
    width = "auto";
    }
    else if(($(obj[i]).css("width")).indexOf("%")>-1){
    width = $(obj[i]).css("width");
    }
    else{
    width = ($(obj[i]).css("width")).substring(0,$(obj[i]).css("width").length-2)*R;
    }
    var height = null;
    if($(obj[i]).css("height")=="auto"){
    height = "auto";
    }
    else if(($(obj[i]).css("height")).indexOf("%")>-1){
    height = $(obj[i]).css("height");
    }
    else{
    height = ($(obj[i]).css("height")).substring(0,$(obj[i]).css("height").length-2)*R;
    }
    var top = null;
    if($(obj[i]).css("top")=="auto"){
    top = "auto";
    }
    else if(($(obj[i]).css("top")).indexOf("%")>-1){
    top = $(obj[i]).css("top");
    }
    else{
    top = ($(obj[i]).css("top")).substring(0,$(obj[i]).css("top").length-2)*R;
    }
    var bottom = null;
    if($(obj[i]).css("bottom")=="auto"){
    bottom = "auto";
    }
    else if(($(obj[i]).css("bottom")).indexOf("%")>-1){
    bottom = $(obj[i]).css("bottom");
    }
    else{
    bottom = ($(obj[i]).css("bottom")).substring(0,$(obj[i]).css("bottom").length-2)*R;
    }
    var left = null;
    if($(obj[i]).css("left")=="auto"){
    left = "auto";
    }
    else if(($(obj[i]).css("left")).indexOf("%")>-1){
    left = $(obj[i]).css("left");
    }
    else{
    left = ($(obj[i]).css("left")).substring(0,$(obj[i]).css("left").length-2)*R;
    }
    var right = null;
    if($(obj[i]).css("right")=="auto"){
    right = "auto";
    }
    else if(($(obj[i]).css("right")).indexOf("%")>-1){
    right = $(obj[i]).css("right");
    }
    else{
    right = ($(obj[i]).css("right")).substring(0,$(obj[i]).css("right").length-2)*R;
    }
    var font_size = null;
    if($(obj[i]).css("font-size")=="auto"||null||""){
    font_size = "auto";
    }
    else{
    font_size = ($(obj[i]).css("font-size")).substring(0,$(obj[i]).css("font-size").length-2)*R;
    }
    $(obj[i]).css({
    "width":width,
    "height":height,
    "top":top,
    "bottom":bottom,
    "left":left,
    "right":right,
    "font-size":font_size
   });
    }
}

你可能感兴趣的:(web前段)