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

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");

});

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

当窗口和电路板宽度相同时,表格位于屏幕左侧:688px.

但是当使用上面的代码时,表会缩小但不会保持位置.这是我的问题.如何让它没有保证金？

让我们重申一下.当我使用上面的变换方法缩小表时,它会在表的顶部和左侧创建一个不合需要的边距.我需要做些什么才能减少这个边距,以便桌子保持顶部和左侧对着它上面的内容和视口左墙？

Answer 1

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

如下所示，$(window).resize(function()事件被包装在$(document).ready(function()事件内部。这做了两个独立但相同的事情：

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

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

请注意 vals 对 的具体贡献transform-origin。这使得内容按照 .txt 之前的原始方式打包在一起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();
});