4

私はdivをロードして、モバイルサファリに絶対に配置しようとしています-アラートボックスのようなものを考えてください。

高さ/幅の半分のマージンでトップを50％に設定した絶対位置のdivを使用しようとしました：

#overlay-message {
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 20px;
  margin: -67px 0 0 -110px;
  width: 220px;
  height: 125px;
}

しかし、私が気付いたように、ビューポートはページ上の固定位置とは異なり、ブラウザを下にスクロールすると要素がオフセット位置に表示されます。値に基づいてjavascriptを使用して位置を移動しようと思ったのwindow.pageYOffsetですが、残念ながら、クロムが表示されているかどうかに関係なく、これは0を示しています。

私の最後の考えは、を使用してブラウザのクロムの高さを計算し、window.outerHeight-window.innerHeightこの値に基づいてdivを移動することでしたが、残念ながらこれは機能していません。

私は試しました（w / jquery）：

$(window).load(function() {
    chrome_height = window.outerHeight - window.innerHeight;
    alert('chrome height is ' + chrome_height + ' outerheight: ' + window.outerHeight + ', innerheight: ' + window.innerHeight); 
});

しかし、私が見つけたのは、両方とも同じであるということですwindow.innerHeight-306 window.outerHeight（私はサファリ開発者のクロムをオンにしています）-したがって、これは機能していないようです。

誰かが私をこれについて正しい方向に向けることができますか？

ありがとう！

-サイモン

4

2 に答える 2

0

この記事では、vewport の問題、特にRetina 以外のサイズをwindow.innerWidth/HeightRetinaを使用して取得する際の大きな悲劇について説明します。window.ourerWidht/Height

于 2013-04-05T11:11:35.283 に答える
-3

iPhone で Safari をスクリーングラブしてから、写真を Photoshop などに取り込んで測定することはできませんか? 「電源ボタン - ホーム ボタン」キーを押してキャプチャした写真は、画面上の実際のサイズの 2 倍になるため、身長を 2 で割ります。

于 2011-06-27T22:27:27.567 に答える