0

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

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

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

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

iPhone 截图。

带网址栏
使用网址栏

没有网址栏
没有网址栏

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

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'
        })
    })
}

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

4

1 回答 1

0

如果您在设置为 100 毫秒的 setTimeout 中调用 setImageSize()，那么 iPhone 是否会为您提供正确的屏幕高度？我记得这是不久前的一个问题。

或者，您不能使用 window.navigator.userAgent.indexOf('iPhone') 来检查它是否是 iPhone，然后将 URL 栏高度添加到图像高度上吗？

于 2013-02-28T11:45:58.150 回答