問題タブ [mobile-chrome]

Android chrome ブラウザをリモートでデバッグするためにweinreを使用しています。Weinre サーバーとモバイル ブラウザー間の通信を確立するために、各ページにカスタム JavaScript ファイルを含める必要があります。

モバイル ブラウザの各ページにカスタム JS を挿入するにはどうすればよいですか?

Android の chrome から始めるのが良い選択肢です。他のブラウザー (IOS の Safari と Android の Firefox) のヒントは大歓迎です。

前もって感謝します ！

socket.io を使用するアプリケーションがあり、socket.emit()モバイル chrome (Android および iOS) から動作していません。socket.emit()がブラウザで実行されていることがわかります。しかし、サーバー側の console.log ステートメントsocket.on()が実行されていないため、メッセージが届いていないと思います。コンソールにもエラーは表示されません。

興味深いことに、すべてがシークレット モードで正常に動作し、さらに Safari などの他のモバイル ブラウザーのすべてのモードでも動作します。

解決策、またはデバッグのヘルプが役立ちます。

編集：

クライアント側コード

サーバー側コード

EDIT2：

socket.io-1.3.5.jsクライアント側で（デフォルトを使用する代わりに）ファイルを手動で指定する/socket.io/socket.io.jsと、コンソールに次のエラーが表示されるようになりました。

websocket クライアントを作成し、websocket サーバー (superwebsocket) に接続するためにプレーンなJava スクリプトを使用しています。

Android アプリ (4.4 バージョン) のいくつかのページで Web ソケットに接続して作業しようとしています。Web ソケット接続を使用しているページを開こうとすると、次のエラーがスローされます。

ここに私の観察があります：

1. エミュレーター経由で、Web ソケットに正常に接続
2. モバイル Mozilla ブラウザから、Web ソケットに正常に接続
3. Chrome から (android アプリが chrome モバイル バージョンで URL を開く)、Web ソケットへの接続中に「プロキシ サーバーを介したトンネルの確立中に接続に失敗しました」というエラーがスローされます。
4. モバイルが chrome の古いバージョン、つまり 41.0 を使用している場合、Web ソケット接続は成功しますが、chrome のバージョンが 41.0 を超える場合、上記のエラーがスローされます。現在、最新の chrome バージョンは 43 です。

この問題の原因となるモバイル クロームの新しい変更はありますか?

CSS animation-delay に関する Safari のイライラするバグがあります。

このアニメーションは、Chrome、Firefox、IE11、IE10 のデスクトップでは美しく動作しますが、Safari ではさまざまな結果が得られます。袋の破片はすべて、同じ量の一時停止 (animation-delay によって制御) の後に表示される必要があります。

デスクトップ Safari は正しく表示される場合もあれば、バッグ トランジションの最初の部分が遅くなり、最後が速くなる場合もあれば、いくつかのトランジションがまとまって表示される場合もあります。iPhone 6 のモバイル Safari およびモバイル Chrome では、アニメーションの遅延をすべて無視して、バッグ全体を一度に移行することがあります。パフォーマンスが一貫していない場合、トラブルシューティングに苦労しています。アニメーションを開始する前に、すべてのアセットがページにロードされていることを確認するために JavaScript を少し追加しましたが、それは役に立たなかったようです。ここで何が起こっているか知っている人はいますか？

http://codepen.io/brendamarienyc/pen/qdoOZM

この質問には 2 つの部分があります。

最初の質問は、iOS Chrome のアドレス バーが一部の Web サイトでスクロール アウトして表示されないのはなぜですか?

EG http://getbootstrap.comのアドレス バーは固定されていますが、 https://uk.yahoo.comは上にスクロールします。

この動作を引き起こしているのは何ですか?

質問の 2 番目の部分は、全画面固定の左側メニュー スライド アウトを作成しようとしているということです。

問題は、ページをスクロールすると、左側のメニューも上にスクロールし、下部に 60 ピクセルの隙間ができることです。

この問題を解決するための回避策を提案できますか?

ありがとうございました！

HTML5ページでビデオを再生するこのコードがあります：

問題は、モバイル chrome (Android Phone) でもモバイル サファリ (iPhone) でも動作しないことです。ただし、デスクトップの「すべての」ブラウザー (Safari、Chrome、Firefox でテスト済み) およびモバイル Firefox (Android Phone) でも動作します。

どうすればこの問題を克服できますか?

編集： このコードを追加しました：

関数 playVid() をトリガーするボタンを追加すると、機能します。したがって、問題は自動再生にあると思います。load イベントで関数をトリガーしようとしましたが、機能しません。

これは、スクロール時にクロム/サファリがビューポートを自動拡張するときに、固定位置と x ピクセルとしての top 属性を持つ私の div が、ビューポートの上部が変更されなかったと考える奇妙なバグです。

さらに奇妙なのは、ビューポートの上/下の端にくっつく他の固定配置要素が自然に移動し、クロム/サファリがスクロール時に自動拡張するときにビューポートの端にくっついたままになることです。

なんらかの理由で私の CSS が非難されるのでしょうか?

YouTube でバグを示すビデオをここで表示します。https://youtu.be/AMJKq3vfFkQ

CSS をデバッグしたい場合、Web サイトは babbly.com で公開されています。簡略化した CSS をここに貼り付けました。

赤い箱が男です。

ウェブサイトのレスポンシブ化に取り組んでいる間、私はこれに沿ってメニューシステムを実装しました - http://www.sitepoint.com/pure-css-off-screen-navigation-menu/

テスト用の iPhone 6 を iOS 8 から iOS 9 にアップデートするまで、すべて順調に進んでいました。 Safari Web インスペクタ。

iOS 9 の Safariからの提案は非表示の入力ファイルでクリック イベントをトリガーしませんが、効果はありませんでした。

javascript の場所/ハッシュのバグについても知っていますが、それが関連しているかどうかはわかりません。

誰かがこのようなことに遭遇し、それを回避する方法またはそれを修正する方法を見つけましたか? 現在、Safari Web View への更新はオプションではありません。