jquery - 你如何将 css transform 与 jquery 和 address window 一起使用以最大化不一致性？

Question

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

我正在尝试在 Bootstrap 内响应式调整表格大小. Bootstrap工作正常，甚至我的 table 也基本正常工作。我遇到的问题是，当调整视口(viewport)大小时(无论是桌面窗口，还是通过手机屏幕呈现页面)，表格都不会以任何合理的方式调整大小。它确实会调整大小，但不会相对于其原始位置进行调整。它会原地收缩并失去与页面上其他元素的边距位置。

如您所见，我已经尝试了评论部分所代表的许多不同方法。我已经倾注了至​​少 40 个浏览器选项卡来寻找可行的解决方案。我遗漏了一些小东西，如果能朝着正确的方向大力插入，我们将不胜感激。

我需要做什么来减少该边距，以便表格保持顶部和左侧相对于其上方的内容和视口(viewport)左侧墙？

See my answer below for the solution for both transformation and maximise issue.

我正在使用的不完整的 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");

});

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

当窗口和板的宽度相同时，表格位于屏幕左侧:688px。

但是当使用上面的代码时，表格会缩小但不会保持位置。这是我的问题。如何让它不赚那个利润？

让我们重申一下。当我使用上面的转换方法缩小表格时，它会在表格的顶部和左侧创建一个不需要的边距。我需要做些什么来减少该边距，以便表格保持顶部和左侧相对于其上方的内容和视口(viewport)左侧墙？

Answer 1

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

正如您在下面看到的，$(window).resize(function() 事件包装在 $(document).ready(function() 事件中. 这做了两件独立但相同的事情:

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

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

请注意 vals 对 transform-origin 的具体贡献。这使内容按照 转换 之前的原始方式打包在一起。

$(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();
});