Question

我发现在页面上垂直对齐某些元素是有问题的，而不会更改其他元素布局。

问题在移动设备上被放大了。如此多的屏幕尺寸，分辨率，肖像，风景......

var x=window.innerHeight - $('#myDiv').height();
    $('#myDiv').css ('margin-top', x/2);

这适用于所有设备，移动设备和桌面设备。你认为这些方法有任何缺点吗？

据我所知，今天所有设备都支持JavaScript。但是，有可能某些设备支持JS但不支持jQuery吗？

Answer 1

您应该使用$('#myDiv').parent().height()代替window.innerHeight，因为如果您的#myDiv元素被其他元素包裹，您的方法可能无法正常工作。
您也可以将代码封装到jQuery plugin中，如下所示：

jQuery.fn.verticalAlign = function ()
{
    return this
            .css("margin-top",($(this).parent().height() - $(this).height())/2 + 'px' )
};

然后你就可以使用它：

$('#myDiv').verticalAlign();

is it possible that some device support JS but doesn't support jQuery ? 不，支持JS正确版本的所有设备都必须考虑jQuery，因为jQuery的核心是纯JS
但是，如果要在浏览器屏幕中垂直对齐元素，可以使用以下代码：

jQuery.fn.verticalAlignScreen = function ()
{
    return this
            .css("position", "absolute")
            .css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop()) + "px");
};

Answer 2

JQuery - 是一样的JavaScript！它只是一个可以使用预编写功能的容器（框架）。所以，如果JS工作--JQ工作。但移动设备的不同之处在于Java Script引擎。我可以说Safari JS引擎比Google更好，这意味着你的Web应用程序将在iOS上运行得更快

Answer 3

实际上，如果你知道你的div的高度，你可以使用纯css，例如我有弹出窗口，高度为540px。要在所有不同的设备上垂直对齐，我会使用：

.popup{
  top:50%;
  margin-top:-270px;
}

水平对齐也是如此。只有在那里你使用另一种造型。例如，你的div宽度为480px：

.popup{
   left:50%
   margin-left:-240px;
 }

另一种接近垂直对齐的方法，如果你不知道高度，并且不想关心它，则遵循jquery方法：

    var a =  Math.round( $(".popup").height()/2 );//here we get half of our divs height
    $(".window_popup").css("margin-top", ( - a  + "px" ) );//here we give to  
   //variable negative  value and get necessary result :)

使用jquery对所有设备进行垂直对齐？

3 个答案: