js 实现浏览页面自适应各种比例

Web开发经常会遇到浏览器的显示比例问题，不单纯是PC端，还有手机、平板等，笔者的处理方案是利用计时器自动刷新zoom值实现。

假设web是基于框架的，例如框架定义如下：

<frameset rows="135,*" cols="*" frameborder="yes" id="allFrame" border="1" framespacing="0" > 
        <frame src="top.aspx" name='topFrame' id='topFrame' scrolling='no' noresize></frame>    
        <frameset cols="180,*,150" rows="*" frameborder="yes" border="1" id="mm" name="mm" framespacing="0">                 
                <frame src="./left.aspx" scrolling='yes'  name="leftFrame" border="0" frameborder="no" >
                <frame src="./center.aspx" scrolling="auto" name="centerFrame" border="1" frameborder="yes" class="div_no_scroll">
                <frame src="./right.aspx" name="rightFrame" border="0" id='f_right' frameborder="no">
        </frameset>      
</frameset>

框架将显示区分为4个部分，上、左、中、右。

在top.aspx页面中增加处理代码：

function get_style_value(o, name) {
            if (o.style[name])
                return o.style[name];
            else if (o.currentStyle)
                return o.currentStyle[name];
            else if (document.defaultView && document.defaultView.getComputedStyle) {
                name = name.replace(/([A-Z])/g, "-$1");
                name = name.toLowerCase();
                var s = document.defaultView.getComputedStyle(o, "");
                return s && s.getPropertyValue(name);
            } else
                return null;
        }
function set_screen_scale(nindex) {
            var devicewidth = document.documentElement.clientWidth;
            var deviceheight = document.documentElement.clientHeight;
            var t = window.devicePixelRatio;
            ratio = 1 / t;
            window.document.body.style.zoom = ratio;
            if (t != 1.0)
                top.frames["leftFrame"].window.document.body.style.zoom = ratio;
            if (t != 1.0)
                top.frames["centerFrame"].window.document.body.style.zoom = ratio;
            if (t != 1.0)
                top.frames["rightFrame"].window.document.body.style.zoom = ratio;
            if (nindex == 0)
                top.frames["allFrame"].rows = parseInt(135 * ratio).toString() + ",*";
            if (t != 1.0)
                top.frames["mm"].cols = parseInt(180 * ratio).toString() + ",*," + parseInt(150 * ratio).toString();
            var a_div = top.frames["rightFrame"].window.document.getElementsByTagName("div");

            for (var x = 0; x < a_div.length; x++) {
                try {
                    var c_class_name = $(a_div[x]).attr("class");
                    if (c_class_name != undefined && (c_class_name.indexOf("pop_div") != -1 || c_class_name.indexOf("_class") != -1)) {
                        var f_w = top.frames["centerFrame"].window.document.documentElement.clientWidth;
                        var f_h = top.frames["centerFrame"].window.document.documentElement.clientHeight;
                        var s_w = parseInt(parseInt(get_style_value(a_div[x], "width")) * ratio);
                        var s_h = parseInt(parseInt(get_style_value(a_div[x], "height")) * ratio);
                        var n_top = parseInt(get_style_value(a_div[x], "top")) * ratio;
                        var n_left = parseInt(get_style_value(a_div[x], "left")) * ratio;
                        
                        if ((n_top < 0 || n_left < 0) || (n_top + s_h > f_h || s_w + n_left > f_w)) {
                            var n_left_new = parseInt((f_w - s_w) / 2 / ratio);
                            var n_top_new = parseInt((f_h - s_h) / 2 / ratio);
                            a_div[x].style.top = n_top_new + "px";
                            a_div[x].style.left = n_left_new + "px";
                        }
                    }
                }
                catch (e) { }
            }

代码中的x循环用于处理弹窗的自动居中，弹窗id或class需要有特征可以捕获。可根据实际需求确定是否增加这个循环。

get_style_value用于获取指定属性值。

然后，增加一个计时器处理：

function set_frame() {
    var t = window.devicePixelRatio;
    if (t != 1.0) set_screen_scale(1);
}
var t_set;
$(document).ready(function () {
    t_set=window.setInterval(set_frame, 10);
    set_screen_scale(0);
});