問題タブ [viewport]

現在のブラウザ ウィンドウの実際の viewPORT サイズを特定しようとしています。私はもう試した：

• window.innerHeight/innerWidth
• document.documentElement.clientHeight/clientWidth
• document.body.clientHeight/clientWidth

すべてが表示領域ではなく、ページ全体のサイズを返します。

私が最終的に達成しようとしているのは、ポップアップ メニューを強制的に画面 (ビューポート) に表示することです。現在表示されている場合、スクロールの下に表示される可能性があり、ユーザーはそれに満足していません。彼らがクリックした場所のx、yを知っています。それを表示領域のサイズ (ポップアップのサイズ) と比較して、画面外になるかどうかを確認するだけです。

ページが IFRAME に表示されていることに注意してください。したがって、正しい値を取得するために 1 レベル上に移動する必要がある場合は、それを行うことができます。

[この問題は、Android モバイル Web ブラウザー (エミュレーター経由で使用) でのみ再現できることに注意してください。]

概要

アンカーをクリックしてページの下部に移動し、別のアンカーをクリックしてページの上部に移動した後、上部のテキストボックス内に入力すると、スクロールしてページの下部にあるアンカーに戻ります。

初期調査

この動作は、viewport メタ タグを使用した結果のようです。Android のブラウザーは、ユーザーが入力を開始したときに、アンカー リンクと、ユーザーがビュー内でドラッグした場所と混同されると思います。これは少し複雑なシナリオだと思いますが、この問題を回避するためのヒントやアドバイスはありますか?

再現する手順：

A. 次のマークアップを使用して、新しい Web ページ test.html を作成します。

B. Android モバイルブラウザで、test.html にアクセスします。

C. リンク「下」をクリックします

D. リンク「トップ」をクリックします

E. テキストボックスをクリックします

実績：

ブラウザがページの一番下までスクロールします。現在、ユーザーは入力内容を確認できません。

予想された結果：

E の後、ブラウザーはどこにもスクロールしません。ユーザーは気を散らすことなくテキストを入力できます。

ノート：

ユーザーが画面をドラッグして一番上に移動すると、下にスクロールせずにテキストボックスに入力できます。問題は、アンカー リンク、テキスト ボックス、ビューポート タグに限定されているようです。これらの変数のいずれかが削除された場合、バグは存在しません。

ウィンドウの高さと幅から外れたいくつかの形状 (円など) を描画しています。ウィンドウは常に特定のサイズで開始されるため、正しく描画されますが、ウィンドウのサイズを変更すると、縦横比が乱れます。

ウィンドウのサイズに関係なく、形状を適切に描画するにはどうすればよいですか?

Is there a way to get the content of a component inside a scroller to be at 100% height.

here is a simple example:

If you run this code and scroll down a bit, this is what you get:

As you can see, the green bar (set at 100% height) is just using the height of the viewport, not that of it's parent group, that is stretched by the red one to be 500px high.

Is there a way to fix that?

さて、ポップアップウィンドウで開く次のマークアップがあります（サイズはJavascriptを介して幅120px、高さ300pxに調整されます）：

そこにある画像は、あなたが「表形式のデータ」と呼ぶものとは正確には一致せず、CSSがいたるところにあることを私は知っています。問題の真実は次のとおりです。このマークアップはボックスモデルとの親友ではなく、変更することはできません。これから説明するエラーを見つけることになっています。

Firefox（さまざまなバージョンとプラットフォーム）でのみ-そして何らかの理由で（まだパターンを見つけることができませんでした）-画像が完全に表示されません。ウィンドウは正しいサイズにサイズ変更されていますが、100％の本体/テーブルは190pxに縮小されてそこで停止しているように見えます。その時点から、ビューポートのみが縮小されますが、本体は190pxのままです。画像が中央に配置されているため、左側に35pxの境界線が表示され、画像がビューポートと重なっています（したがって、完全には表示されません）。

奇妙なことに、昨日変更を加えずにまったく同じブラウザ/ OSでまったく同じページにアクセスし、エラーを再現でき（リロード、再起動後など）、本体が120pxに縮小されないため、エラーを再現できなくなりました。大丈夫。ここにパターンが見つかりません。

どんな提案やアイデアも大歓迎です！

よろしくお願いします
トビ

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

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

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

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

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

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

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

ありがとう！

-サイモン

I have an AJAX app built for mobile Safari browser that needs to display different types of content.

For some content, I need user-scalable=1 and for other ones, I need user-scalable=0.

Is there a way to modify the value of the content attribute without refreshing the page?

head にメタタグを追加および削除するサンプル スクリプトを作成しました。しかし、Android 2.2 はその削除を尊重していないようです。ただし、たとえば、クリック時のメタタグの追加は尊重されます。タグの削除を尊重し、javascript を介してデフォルトのビューポートに戻すにはどうすればよいですか?

これらがどのように機能するかについて頭を悩ませています。まず、2Dゲームでは、投影行列をオルソとして設定し、左、右、上、下をウィンドウに一致させる必要があります。しかし、ウィンドウのサイズが変更された場合、投影行列ではなく、glViewportを変更する必要がありますか？また、アスペクト比を維持するにはどうすればよいですか？

私がそれをよりよく理解できるように、誰かが2D正書法ゲームでこれら2つの目的を説明できますか？

OpenGLが2Dセットアップで多くの役に立たないことをしているように感じます。画像がすでに存在する場合にフラグメントをラスター化して計算し、頂点座標をNDCに変換して、glViewportによって既に存在する場所に変換し直します。

また、レガシーフリーのOpenGLで、glViewportが行う独自の計算ではなく、独自のマトリックスを作成する必要があるのはなぜですか？

ありがとう。

私はWebページをプログラミングしています/-iPhone用のアプリケーション。以前にページを使用していたときにどこにスクロールしたかに関係なく、ページのリロード後に特定の位置にスクロールする必要があります。私が使用するスクリプトはFirefoxでは正常に機能しますが、mobileSafariでは機能しません。Firefoxとは対照的に、mobileSafariは、以前にスクロールした位置を保存し、リロード後にトリガーされたscrollToを無視して、リロード後にそこにジャンプするようです。

これは私が使用するコードです：

手動でトリガーするクリックイベントで機能します。ボタンをクリックしてスクロール機能をトリガーすると、スクロールが実行されます。合成イベントのJavaScriptを介してクリックをトリガーしようとしましたが、これも機能しません。

リロードやその他の明示的にユーザーがトリガーしないイベントでスクロールをアーカイブできる方法はありますか？