4

有没有办法让一个元素在移动浏览器的视口上居中？

这意味着，当用户捏合缩放时，他们仍应在其视口中心看到该元素（比如说一个样式为窗口的 div）。

4

4 回答 4

0

事实证明，捏缩放会在我的 ipad mini 和我的 android 4.something 设备上的 ios 浏览器中触发一个窗口滚动事件。

$(window).on("resize scroll", function () {
    clearTimeout(pinchToZoomCheckTimer);
    pinchToZoomCheckTimer = setTimeout( function () {
        var width = window.innerWidth || document.documentElement.clientWidth;
        var height = window.innerHeight || document.documentElement.clientHeight;

        dlgInner.width(width);
        dlgInner.height(height);
        dlgInner.css("top",window.pageYOffset+"px");
        dlgInner.css("left",window.pageXOffset+"px");
    }, 50);
});

这会将 div 集中在视口使用的确切位置上。由于它是透明的，它“有点”占据了整个视口。我读过一些浏览器报告了 window.innerWidth 的更多像素，但我可以忍受 ~20px 的位移。

http://jsfiddle.net/agilius/yFajk/show在我的 ipad mini 和 android nexus 上放大并在放大后滚动时工作。

于 2013-09-13T09:22:40.210 回答
0

您可以尝试将 div 定位固定，并使用边距和上/左的组合将其居中：

.center {
    position:fixed;
    z-index:999;
    width:200px;
    height:200px;
    background:#4679BD;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
    left:50%;
}

JSFiddle：http: //jsfiddle.net/HGtQA/

于 2013-09-11T14:30:51.793 回答
0

我找不到使用 HTML\CSS 的直接方法。

您可以使用 JavaScript 检测页面缩放，然后计算相对于原始大小和缩放系数的绝对大小。

看看这个： 如何在所有现代浏览器中检测页面缩放级别？ 有一个非常好的和通用的方法。

于 2013-09-11T14:29:11.830 回答
-2

“他们仍然应该看到元素”是什么意思？如果用户缩放，他将只看到图像的一部分。但是，如果您愿意，可以使用此元禁用缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
于 2013-09-11T14:21:00.217 回答