問題タブ [mobile-chrome]

各セクションに 100vh を使用する Web サイトを構築しています。ただし、モバイル ブラウザーでは、アドレス バーの非表示/表示に伴ってビューポートの高さが増減するため (Chrome など)、UI の不具合につながります。スクロール時にアドレスバーが自動的に非表示になるのを防ぐ方法はありますか?

Freelancer Web サイトには、これを修正する実装があります。誰かがこれがどのように行われるか説明できますか? https://m.freelancer.com

Chrome を使用してブラウザをモバイル モードにすると、問題を再現できます。ブラウザーでhttp://responsive.menuに移動し、右側のメニューを使用します。サブ メニューのプラスとマイナスの矢印をクリックするだけで、効果を確認できます。

また、スクリーンショットとスクリーンキャスト:

ショット: https://drive.google.com/uc?export=download&id=0B-M6Yes83t08RjJ1T1IxU2JDTjg

画面キャスト: https://drive.google.com/uc?export=download&id=0B-M6Yes83t08cTRJbXNNTGdjcmM

コンポーネントの作成者から:

これは、モバイルが jQuery モバイル ライブラリの読み込みに戻らずにサイトの本文でクリック イベントを検出できるようにcursor: pointer;、本文に追加したためです。

これには、ブラウザが本文全体をリンクと見なすようになるため、モバイル Chrome でこれらの青いフラッシュが作成されるという副作用があります。最も簡単なオプションは、長期的に回避策があるかどうかを確認しながら、[本文をクリックしてメニューを閉じる] オプションをオフにすることです。これを回避する唯一の方法は、jQuery モバイルを個別にロードすることですが、私は常にこれを実行することに消極的でした。

質問の更新:

これは Chrome モバイルでのみ発生します。Safari と Firefox のモバイル動作をどのようにエミュレートしますか?

更新 問題は Google ドライブの問題であることが判明しました。何らかの理由で、モバイル ブラウザのファイルを使用するには、完全に公開に設定する必要がありますが、デスクトップ ブラウザのファイルは「リンクを知っている人なら誰でも」再生できます。適切なエラー報告がないため、これを追跡するのは困難でした。

問題: ボタンをクリックして html5 タグを再生すると、すべてのデスクトップ ブラウザーで完全に機能しますが、iOS の mobile-chrome または mobile-safari では機能しません。（アンドロイドではテストしていません）。

この例は、私がテストしたすべてのデスクトップ ブラウザーで完全に機能しますが、iOS Chrome や iOS サファリでは機能しません。理由がわかりません。ここに div を書きましたが、いくつかある可能性があるため、プログラムで作成しています。テストのために、以下に示すものを使用しました。

DIV: (以下の 'my​​fileidgoeshere' は、ここで削除された実際の ID です.. )

play 関数: (上記の div をプログラムで作成しているため、変数を取得する必要があります。

}

ここSOで多くの「ページの下部にある不思議な空白」の問題を見て、viewportタグを何度も試しましたが、何が間違っているのかまだわかりません!

問題のページ: http://www.seniorchoicesunl.com/error_documents/error401.php

Chrome Dev Tools からのモバイルでの表示は次のとおりです。

私が間違っていることについてのアイデアはありますか?

編集：

ANY を設定するのinitial-scaleは悪いニュースです。文字が小さすぎる！見てみましょう：

デスクトップとタブレットをそのまま維持しながら、望ましいモバイルの外観は次のとおりです。

PS この問題を修正すると、他の Web ページで発生している他の関連する問題が相互に修正される可能性があります。

スクロール中の可視性を制御したいヘッダーがあります。ページを下にスクロールすると、ヘッダーは他の要素と同じように動作する必要があります。ページを上にスクロールするとき、ページの位置に関係なく、ページが上がるにつれてヘッダーを表示したいと思います。この動作は、簡単な例を観察することで最もよく理解できます。

スクロール イベントをリッスンし、固定位置の div を負のトップ値で更新しています。

ただし、Chrome for Mobile での動作は、私が期待するものとはまったく異なります。多くの場合、ヘッダーはアニメーション化されず、境界が満たされるとすぐに表示または非表示になります。アニメーションを実行すると、パフォーマンスは停止するほど不規則になり、多くの場合、1 ～ 3 フレームしか描画されません。デスクトップ Chrome のモバイル エミュレーションを使用している場合、この動作は発生しません。実際のデバイスでのみ発生します。

これは、ページ上部の固定位置要素を処理する場合にのみ発生するようです。側面や底面から移動するなど、固定要素を別の方法で変更しようとすると、すべてが期待どおりに機能します。実際、固定位置のトップ要素と固定位置のサイド要素の両方を変更すると、トップ要素はより均一に動作します。

Chrome for Mobile が固定位置の要素をページの上部に配置すると、なぜ不安定になるのですか? 簡潔に説明できる方法はありますか？

Google chrome モバイル [Android タブレット] のウェブサイトに自動ログインする理由やアプリを知っている人はいますか? Chrome は資格情報を自動入力していますが、ログインをクリックするまでログインしないでください。自動化する方法は？起動後にクロムとウェブサイトを起動する自動起動アプリがありますが、このウェブサイトで自動ログインが必要です!