Question

iPhone上已报告显示问题。我一个都没有。我想知道是否有人有任何想法。

在我的网站上。问题似乎是由网址栏引起的。在android上，函数$(window).height()返回（屏幕高度 - url bar）。在iOS上，它似乎没有这样做。

在我的网站上，我正在通过网址栏跳过该页面。然后我将图像全屏显示并居中。（由于某些规范限制，我必须使用Javascript）

在Android中，图像会调整为屏幕的可见区域。在iPhone上，它们被调整到可用的高度 - 网址栏。这会导致图像太小而底部有间隙。至少这是我对这个问题的理解。

iPhone屏幕截图。

with url bar
使用网址栏

without the url bar
没有网址栏

这就是我用来调整图像大小的方法。

window.scrollTo(0, 1);
function setImageSize() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();

    $('.photo-slide img').each(function() {
        var width = $(this).attr('data-width');
        var height = $(this).attr('data-height');

        if (width > windowWidth) {
            var ratio = windowWidth / width;
            width = windowWidth;
            height = height * ratio;
        }

        if (height > windowHeight) {
            var ratio = windowHeight / height;
            height = windowHeight;
            width = width * ratio;
        }

        var marginTop = 0;
        var marginLeft = 0;

        if (windowHeight > height) {
            marginTop = (windowHeight - height) / 2;
        }
        if (windowWidth > width) {
            marginLeft = (windowWidth - width) / 2;
        }

        $(this).css({
            'margin-left':marginLeft+'px',
            'margin-top':marginTop+'px',
            'width':width+'px',
            'height':height+'px'
        })
    })
}

有没有人遇到过这个？如何解决此问题，以便在网址栏不可见时图像填满屏幕。

Answer 1

如果你在setTimeout中调用setImageSize（）设置为100毫秒，那么iPhone会给你正确的屏幕高度吗？我记得这是一个问题。

或者你不能使用window.navigator.userAgent.indexOf（'iPhone'）检查它是否是iPhone，然后将URL栏高度添加到图像高度？

iPhone上的高度不正确

1 个答案: