Question

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

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

Answer 1

我找不到HTML \ CSS的直接方式。

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

看看这个： How to detect page zoom level in all modern browsers? 有一种非常好的和普遍的方式。

Answer 2

您可以尝试将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/

Answer 3

事实证明，在我的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视为视口使用的确切位置。由于它是透明的，它有点＆＃34;有点＆＃34;占据整个视口。我已经读过一些浏览器为window.innerWidth报告了几个像素，但我可以使用~20px的位移。

http://jsfiddle.net/agilius/yFajk/show同时捏缩放，并在放大我的ipad mini和android nexus后滚动。

Answer 4

你是什么意思“他们仍然应该看到元素”？如果用户缩放，他将只看到图像的一部分。但是如果你想要你可以用这个meta禁用缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

如何在移动浏览器上将元素置于视口宽度和高度上？

4 个答案: