3

我发现垂直对齐页面上的一些元素而不改变其他一些元素的布局是有问题的。

这个问题在移动设备上被放大了。如此多的屏幕尺寸、分辨率、纵向、横向……

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

这应该适用于所有设备，移动设备和桌面设备。您认为这些方法有什么缺点吗？

据我了解，当今所有设备都支持 JavaScript。但是，是否有可能某些设备支持 JS 但不支持 jQuery ？

4

3 回答 3

6

您应该使用$('#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 ? 不，所有支持正确版本的设备JSmust 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");
};
于 2013-07-18T05:44:38.930 回答
1

JQuery - 是相同的 JavaScript！它只是一个具有您可以使用的预先编写功能的容器（框架）。因此，如果 JS 有效 - JQ 有效。但移动设备上的差异在于 Java Script 引擎。我可以说 Safari JS 引擎比 Google 更好，这意味着你的 Web 应用程序在 iOS 上运行得更快

于 2013-07-18T05:47:25.313 回答
0

实际上，如果您知道 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 :)
于 2015-05-28T19:00:51.583 回答