デスクトップ版のブラウザにウェブサイトのモバイル版を表示させる

モバイルWebアプリケーションをデスクトップのWebブラウザに表示するための迅速な方法があるかどうかを確認するよう求められました。これは、モバイルデバイスよりも大規模なデバイスで適切にレンダリングするための作業を完了するための時間とリソースが得られるまでの間、止まるものではありません。デスクトップ版のブラウザにウェブサイトのモバイル版を表示させる

私がデスクトップ用に考えた最初の事は、私たちのモバイルウェブアプリケーションがあれば、モバイルサイトをiFrameにプルして幅と高さを強制することでした（現在は414x736）。私はそうすることで、CSSメディアの選択が414pxの幅を賞賛してくれることを期待していましたが、それは起こっていません。

コンソールにビューポートの幅をダンプすると、実際には414pxの幅が表示されますが、添付されているスクリーンショットからわかるように、CSSメディアの選択では414pxの幅が使用されていません。ここで

同じビューは、幅と高さが持っていたiFrameにレンダリングすることをされています。ここでは

は、我々は（これはiPhone 6デバイスモードでChromeのデバッガのほんのスクリーンショットです）見たいものですそれぞれ414と736に設定されています。フレームサイズは、私がしたいだけのように完璧な機能ですが、CSSのメディア選択がborkedされています

出典

2017-05-30 Rjak

私はそれを行う最も簡単な方法は、メディアクエリを使用し、幅を100％に設定したいと思うでしょう。しかし、あなたが望むサイズの最大幅を持っているので、最大幅を使用してください：414px（上記の画像に基づいて） – Keith

本で説明したように、モバイル版を送ることにあなたのアプリをだますためにユーザーエージェント文字列を操作することができます記事？ https://www.howtogeek.com/139136/how-to-access-mobile-websites-using-your-desktop-browser/

出典

2017-05-30 18:17:31 007

提案していただきありがとうございます。私はiFrameのためのUserAgentを手続き的に設定するために、次の記事を使ってそのショットを書いた：https://stackoverflow.com/questions/12057890/fake-user-agent-for-iframe。残念ながら、それは違いはありませんでした。私はデバッガで、UserAgentがiFrame内のリクエストに期待していたものであることを確認しました。これはデッドエンドです。 – Rjak

それはiFrameになければならない理由はありますか？私はこれが難しさの原因だと思います。 – 007

絶対にありません。要件は、モバイル上で素晴らしいレンダリングし、1時間以内にデスクトップ上で動作させるwebappを取ることです。これを行う正しい方法は、すべてのスタイルを修正して、すべてのデバイスタイプですべてのものが適切に反応するようにすることです。私に頼むことは、そのすべての努力を避け、魔法の弾丸があるかどうかを調べることです。 iframeは私の最初のものでしたが、私はかなり近づいていましたので、追求する価値があると思いました。 – Rjak

このソリューションは私たちのwebappに固有のもので、ボード全体で機能しない可能性があり、このソリューションは完璧ではありませんでした。

このWebアプリケーションを元々実装していた開発者（React/Redux）は、以前のwebappの繰り返しのCSSおよびグラフィックアセットに頼っていました。私がなぜわからないんだけど、Webアプリケーション自体は、次のようにビューポートに適用されるグローバル50％の規模を持っています

<meta name="viewport" content="width=device-width, initial-scale=0.5">

私のiFrameに次のスタイルを適用することにより...

... 
.force-mobile { 
    width: 750px; 
    max-width: 750px; 
    height: 1334px; 
    margin: 0 auto; 
    border-style: none; 
    border-color: inherit; 
    border-width: 0px; 
    -webkit-transform: scale(0.5); 
    -webkit-transform-origin: 0 0; 
    display: block; 
} 
... 
<body> 
    <iframe id="forceMobile" class="force-mobile" src="http://myhost/mobile/"></iframe> 
</body>

。ミス（イメージマップにこれは位置決めの問題はあるものの、実際には機能的であり、かつオフセットの問題

：..私は次の結果を得ましたハンバーガーメニューのアイコンがこれによって引き起こされます）。アプリ全体を歩き回り、個々の部分に修正を加える必要がありますが、このアプローチは私を機能的な姿勢にしてくれましたので、今はそれに満足しています。

私は進歩を続けながらこれを更新していきます。

出典

2017-05-31 15:21:31 Rjak

デスクトップ版のブラウザにウェブサイトのモバイル版を表示させる

答えて

関連する問題