Question

所述问题的尝试和图片记录：

我正在尝试在Bootstrap内响应地调整表格。 Bootstrap工作正常，甚至我的桌子工作也很好。我遇到的问题是，当调整视图端口大小（无论是桌面窗口，还是通过手机屏幕呈现页面）时，表格不会以任何合理的方式调整大小。它确实调整大小但不相对于其原始位置。它缩小到位并且与页面上的其他元素一起丢失其边距位置。

正如你所看到的，我已经尝试了一些由注释部分表示的不同方法。我已经倾倒了至少40个浏览器标签，寻找可行的解决方案。有一些我缺少的东西，我们将非常感谢你在正确方向上的良好推动。

我需要做些什么来减轻这个边距，以便桌子保持在顶部和左侧对着它上方的内容和视口左墙？

请参阅下面的答案，了解转换和最大化问题的解决方案。

我正在使用的不完整的jquery代码：

$(window).resize(function()
{
    var ww = $(window).width();
    var hh = $(window).height();
    var tt = $(".gametable").width();

    var scle = 0.0;//parseFloat(tt) / parseFloat(ww);

    if (ww <= 688);
    {
        scle = parseFloat(ww) / parseFloat(tt);
        //$(".gametable").css("transform", "scale(" + scle.toString().substr(0, 4) + ")");
        $('.gametable').css({
          '-webkit-transform' : 'scale(' + scle.toString().substr(0, 4) + ')',
          '-moz-transform'    : 'scale(' + scle.toString().substr(0, 4) + ')',
          '-ms-transform'     : 'scale(' + scle.toString().substr(0, 4) + ')',
          '-o-transform'      : 'scale(' + scle.toString().substr(0, 4) + ')',
          'transform'         : 'scale(' + scle.toString().substr(0, 4) + ')'
        });
    }

    $(".log").html($(".log").html() + scle.toString().substr(0, 4) + "<BR>");

//    $(".gametable").width($(".gamerow").css("width"));
//    $(".gametable").height($(".gamerow").css("width"));

//    $(".gametable").css("transform", "scale(0.75)");

    $(".gametable").css("position", "relative");
    $(".gametable").css("top", "0");
    $(".gametable").css("left", "0");
    $(".gametable").css("padding", "0");
//
//    $(".gamediv").css("position", "relative");
//    $(".gamediv").css("top", "0px");
//    $(".gamediv").css("left", "0px");
//    $(".gamediv").css("padding", "0px");

});

可以在下面的图片中找到所述行为的精确描述：

enter image description here 当窗口和电路板宽度相同时，表格位于屏幕左侧：688px。

enter image description here 但是当使用上面的代码时，表会缩小但不会保持位置。这是我的问题。如何让它没有那么多？

让我们重申一下。当我使用上面的变换方法缩小表时，它会在表的顶部和左侧创建一个不合需要的边距。我需要做些什么才能减少这个边距，这样桌子就会保持顶部和左边的内容，而且视图端口还留在墙上？

Answer 1

在vals的帮助下，我想出了一个完全动态调整表格大小的解决方案。其他人可以调整我的代码如何应用他们的特定问题。我的代码还处理桌面环境中视图端口一角的操作系统“最大化”按钮的问题。这段代码解决了在我可以访问的所有5大浏览器和移动浏览器中调整表格大小的所有问题。我希望这可以帮助一百万人。：）

如下所示，$(window).resize(function()事件包含在$(document).ready(function()事件中。这有两个独立但平等的事情：

它可以防止$(window).resize(function()被多次调用。
它可以防止过早调用$(window).resize(function()，导致各种宽度和高度调用中的值可能会出现偏差和错误。

这适用于所有典型的动态内容调整大小过程。

请注意vals transform-origin的具体贡献。这样可以将内容按照最初trasformation之前的方式打包在一起。

$(document).ready(function()
{
    $(window).resize(function()
    {
        if ($(window).width() <= 700 || $(window).height() <= 800)
        {
            var sclw = ((parseFloat($(window).width()) - 30) / parseFloat($(".gametable").width())).toString().substr(0, 4);
            var sclh = ((parseFloat($(window).height()) - 120) / parseFloat($(".gametable").width())).toString().substr(0, 4);
            var sc = parseFloat(sclw) < parseFloat(sclh) ? sclw : sclh;

            $('.gametable').css({
              '-webkit-transform' : 'scale(' + sc + ')',
              '-moz-transform'    : 'scale(' + sc + ')',
              '-ms-transform'     : 'scale(' + sc + ')',
              '-o-transform'      : 'scale(' + sc + ')',
              'transform'         : 'scale(' + sc + ')',
              'transform-origin'  : 'top left'
            });
            $('.mininfo').width(parseFloat($(window).width()) - 30);
        }
        else
        {
            $('.gametable').css({
              '-webkit-transform' : 'scale(1)',
              '-moz-transform'    : 'scale(1)',
              '-ms-transform'     : 'scale(1)',
              '-o-transform'      : 'scale(1)',
              'transform'         : 'scale(1)',
              'transform-origin'  : 'top left'
            });
            $('.mininfo').width($(".gametable").width());
        }
    }).resize();
});

Answer 2

您是否考虑过在css中使用媒体查询而不是JavaScript？我更喜欢这种情况，因为我自己的代码可能会出错...只有样式和视口规范。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

你如何使用css变换与jquery和地址窗口最大化不一致？

2 个答案: