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

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必须是sopport 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");
};