Question

我有一个Web应用程序，尝试允许用户上传照片然后进行裁剪。我的页面上有一个股票图像，当用户上传他们的照片时，股票照片被上传的图像作为画布对象覆盖。画布对象可以移动，并且在图像画布的顶部有一个固定的帧图像，该图像用作裁剪框（下图）。我将上传的图像画布的onload事件设置为一个函数，该函数将框架居中，并将框架宽度设置为等于图像画布的宽度。我遇到的问题是在手机上返回的$（window）.innerWidth（）值不一致。有时返回355（产生正确的输出结果），有时返回928（产生不正确的输出结果）。这是在屏幕宽度为750像素的iPhone 8上进行的测试。默认情况下，图像画布的宽度设置为45vw，并且当窗口宽度小于800（以容纳电话屏幕）时，图像画布的宽度将提高到80vw。一个有趣的部分是，当$（window）.innerWidth（）返回928时，画布对象的报告宽度为417.6（928 * .45），并且帧图像设置为等于该宽度；但是，输出结果会导致一个框架对象延伸到电话屏幕的外部，而画布对象的大小却适当。我已经尝试过多种形式的测量屏幕宽度的方法（$（window）.width（），window.innerWidth，$（document）.width（）等）。我几天来一直在尝试解决此问题，但尚未找到解决方案。先谢谢您的帮助。

加载功能：

function adjust_crop_window(img_id) {

$(function () {
window_width = $(window).innerWidth();

if (window_width < 800) {
    $("#" + img_id).css({"width":"80vw"});
}

var swidth = $("#" + img_id).width();
// Adjust width of frame to equal the image
var fwidth = $("#frame").width(),
fheight = $("#frame").height();

// Porportionately adjust the height of the frame
var new_height = (fheight / fwidth) * swidth;
$("#frame").css({"width": swidth});
$("#frame").css({"height": new_height});
fwidth = swidth;
fheight = new_height;

// Center the photo 
var fheight = $("#frame").height();
$("#frame").css({"margin-left": '-'+fwidth/2+'px'});
$("#frame").css({"margin-top": '-'+fheight/2+'px'});


// Lock the div's height so we can move the contents without
// the div moving 
var area_height = fheight * 1.30;
var offset = Math.floor((fheight * .3) / 2);

$("#gesture-area").css({"height":area_height});
$("#" + img_id).css({"margin-top":offset + "px"});
});}

示例屏幕截图： https://i.fluffy.cc/LP7W1pRkKDfglnzwV93J9NPSrc8kLl6Q.png

jQuery- $（window）.width（）和$（window）.innerWidth（）返回不一致的值

0 个答案: