当前位置 : 主页 > 网页制作 > JQuery >

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

来源:互联网 收集:自由互联 发布时间:2021-06-15
我发现在页面上垂直对齐一些元素是有问题的,而不改变其他元素布局. 这个问题在移动设备上被放大了.如此多的屏幕尺寸,分辨率,肖像,风景…… var x=window.innerHeight - $('#myDiv').height();
我发现在页面上垂直对齐一些元素是有问题的,而不改变其他元素布局.

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

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

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

据我所知,今天所有设备都支持JavaScript.但是,某些设备是否可能支持JS但不支持jQuery?

您应该使用$(‘#myDiv’).parent().height()而不是window.innerHeight,因为如果您的#myDiv元素被另一个元素包装,您的方法可能无法正常工作.
您还可以将代码封装到jQuery插件中,如下所示:

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

然后你就可以使用它:

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

是否有可能某些设备支持JS但不支持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");
};
网友评论