调整我的表格或窗口的大小？ HTML5答案

【问题标题】：Resizing my Table or Window? HTML5调整我的表格或窗口的大小？ HTML5
【发布时间】：2014-03-13 21:53:14
【问题描述】：

试图让我的应用程序适应浏览器窗口的宽度和高度并保持比例。

我已经包含了一个示例的 JS 小提琴：http://jsfiddle.net/4Mjtr/3/

在 photoshop 中被切片，因此 html 的输出方式是每个 div 类都有自己的 css，例如

 //HTML//
<div class="id1462-Select-Pattern">
 <a href="Patterns.html"><img src="http://www.travel-master.co.uk/coach-hire-minibus-images/email-quote.jpg"width="183" height="45" alt="" /></a>
</div>

//CSS//
div.id1462-Select-Pattern {
    position:absolute;
    left:80px;
    top:723px;
    width:183px;
    height:45px;
 }

我已经尝试过媒体查询，但画布和图像似乎没有调整大小，我也读到，你必须手动更改字体大小，但图像没有正确调整大小

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

从图像中移除高度，仅设置宽度将调整图像大小并保持比例。

您可以使用 javascript 函数来获取浏览器的宽度和高度，如下所示：

function getBrowserWindowSize() {
    var myWidth = 0, myHeight = 0;
    if (typeof (window.innerWidth) == 'number') {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    }
    else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    }
    else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }

    var currWindow = new Array();
    currWindow[0] = myWidth;
    currWindow[1] = myHeight;
    return currWindow;
}

您可以通过再次调用此函数来通过调整大小和加载事件来管理所需的元素宽度和高度。

【讨论】：