javascript - 当屏幕方向改变时重新运行 javascript 函数

Question

我正在使用缩放图像以适合父 div 的代码，它称为“aspect Correct”。问题发生在移动版本上:我的父 div 具有 100% 宽度，当用户将屏幕方向更改为横向时，图像不会调整大小以适应新 div 的宽度。

当用户更改屏幕方向时，有办法重新运行 onload 事件(缩放图像)吗？

这是我的网站:www.mcsoftware.com.br/sitemc我还在努力。

(要理解我在说什么，请在手机上打开它，当您更改屏幕方向时，只需单击“Continuar mesmo assim”即可导航)

谢谢!

方面正确.js

function ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox) {

    var result = { width: 0, height: 0, fScaleToTargetWidth: true };

    if ((srcwidth <= 0) || (srcheight <= 0) || (targetwidth <= 0) || (targetheight <= 0)) {
        return result;
    }

    // scale to the target width
    var scaleX1 = targetwidth;
    var scaleY1 = (srcheight * targetwidth) / srcwidth;

    // scale to the target height
    var scaleX2 = (srcwidth * targetheight) / srcheight;
    var scaleY2 = targetheight;

    // now figure out which one we should use
    var fScaleOnWidth = (scaleX2 > targetwidth);
    if (fScaleOnWidth) {
        fScaleOnWidth = fLetterBox;
    }
    else {
        fScaleOnWidth = !fLetterBox;
    }

    if (fScaleOnWidth) {
        result.width = Math.floor(scaleX1);
        result.height = Math.floor(scaleY1);
        result.fScaleToTargetWidth = true;
    }
    else {
        result.width = Math.floor(scaleX2);
        result.height = Math.floor(scaleY2);
        result.fScaleToTargetWidth = false;
    }
    result.targetleft = Math.floor((targetwidth - result.width) / 2);
    result.targettop = Math.floor((targetheight - result.height) / 2);

    return result;
}

onimageload.js

function OnImageLoad(evt) {

    var img = evt.currentTarget;

    // what's the size of this image and it's parent
    var w = $(img).width();
    var h = $(img).height();
    var tw = $(img).parent().width();
    var th = $(img).parent().height();

    // compute the new size and offsets
    var result = ScaleImage(w, h, tw, th, false);

    // adjust the image coordinates and size
    img.width = result.width;
    img.height = result.height;
    $(img).css("left", result.targetleft);
    $(img).css("top", result.targettop);
}

onload 函数去哪里

<img onload="OnImageLoad(event);" />

https://jsfiddle.net/ffxeqq21/

Answer 1

你可以尝试一些像jQuery mobile这样的javascript库并使用 orientationchange event这样你就可以这样做

$( window ).on( "orientationchange", function( event ) {
  //Some code
});