ipadの垂直センタリングウィンドウ/ div

Question

iPadを含むすべてのブラウザでうまく動作する非常に基本的なモーダルウィンドウスクリプトが見つかりました。しかし、iPad上ではモーダルウィンドウがサイトの上部に配置されるので、ユーザーがサイトの下部にスクロールすると、スクロールして上に移動することはできません。

私はこのような何かが役立つかもしれないと思った：

//Get the window height and width 
    var winH = $(window).height(); 
    var winW = $(window).width(); 

    if (navigator.userAgent.match(/iPad/i)) { 
    winH = winH + $(window).scrollTop(); 
    } 

    //Set the popup window to center 
    $(id).css('top', winH/2-$(id).height()/2); 
    $(id).css('left', winW/2-$(id).width()/2); 

しかし、すなわち、それはまだ間違ってdiv要素を配置することで作業していません。ビューポートにはありません。

ご迷惑をおかけして申し訳ありません。

Answer 1

したがって、iPadの位置は固定されていないという問題がありました。これは私がその周りに得た方法である：

if (navigator.userAgent.match(/iPad/i)) { 
var positionY = window.pageYOffset; 
boxH = 690 - 400; 
// 690 is Safari's usable area on ipad landscape 
// 400 is height of div 
positionM = positionY + boxH; 
//Set the popup window to center 
$(id).css('top', positionM); 
} 

明らかにそれが縦に肖像画iPadでdiv要素をセンタリングしませんが、ちょっとこれは率直に言って、十分に良いです！

Answer 2

fiddleは、必要な場所に移動します。 （positonに注意を払う：CSSに固定）。基本的には、モーダルを固定位置、上マージン50％、左マージン50％に設定し、上/左をモーダル高さ/幅の50％ずつオフセットするだけです。

これは当然、以前のバージョンのIE（ 'fixed'属性の問題）で細かくなります...しかし、やはり普通のiPadユーザーはおそらくIE6をロールしていません。

.sample{ 
     position : fixed; 
     top  : 50%; 
     left  : 50%; 
     height  : 100px; 
     width  : 100px;   
     margin-left: -50px; 
     margin-top : -50px; 
     border  : 1px solid #000 
} 

<div class="sample">Sample</div>