web-dev-qa-db-ja.com

Webページのセクションでのモバイル解像度のシミュレーション

主にデスクトップの大画面モニターに使用するWebサイトがあります。ページ内にはさまざまなコンテンツセクションがありますが、モバイルアプリ内の項目が異なる携帯電話でどのように異なるように見えるかをユーザーに表示するdiv内のモバイルアプリ領域も必要です。私が見るいくつかの電話のスペックを見る：

  • iPhone 7（4.7インチ）-1,334 x 750ピクセル（326 ppi）
  • iPhone 7（5.5インチ）-1,920 x 1080ピクセル（401 ppi）
  • Samsung Galaxy S7-2,560 x 1440ピクセル（577 ppi）

明らかに、ppiはデスクトップディスプレイと携帯電話では異なります。

物事がどのように見え、携帯電話に配置されるかをシミュレートする最良の方法は何でしょうか？長さと高さの相対的な比率を取り、ppi作業を無視するだけでしょうか？

注

Chromeデベロッパーツールに精通しています。これは私が求めていることではありません。モバイルアプリセクションはページのdivにある必要があります。ページ全体を取得してそれを作成することではありません。モバイルアプリのように見えます。

また、開発者ツールの使用方法を理解する必要がないように、ユーザーに対して透過的なものである必要があります。

htmlcssmobile
26
kojow7

DPI設定は、どのWeb言語（HTML/CSS/JS）でも設定できません。ただし、シミュレーションについては、コードをiframeまたはdivに配置し、iframe内にWebサイトをロードして、[〜＃〜] css [〜＃〜]を使用できますtransform:scale()は、携帯電話のPPI。

あなたとして 見る 例iPhone6sは750 x 1334ネイティブ解像度（ピクセル）しかし375 x 667UIKitサイズ（ポイント）と2.0のネイティブスケール係数。 see in CSS Media Queries でもできます。これは375 x 667でレンダリングされ、ネイティブファクター（ここでは2.0）でスケーリングされて、デバイスディスプレイにフィットします（ソフトを発生させます） アンチエイリアスのような効果 この操作の間に発生します）。

そして今、私のiMac 27のiPhone6sの326 ppiで画面をシミュレートします"2012 with apparently108.79 ppi（通常は96にすることができます）、108.79/326の係数を持つ別のスケールがあります。したがって、transform:scaleで適用する最終的なスケール係数は次のとおりです。

with iframe of 375 x 667 pixels size 
108.79/326 * 2.0 = 0.667 : as scale factor

そう ：

.iPhone6S {
  /* this is the render are dimension */
  /* media queries look up to this */
  width:375px;
  height:667px;
  transform-Origin: 0 0;
  transform:scale(0.67); 
  /* you can calculate it by something like : 
     108/326*2 = 0.663 => 0.67*/
  /* zoom:...; */ /* This is non-standard feature */
                  /* FireFox and Opera don't support it */
}

<iframe src="https://www.w3schools.com/" class="iPhone6S"></iframe>

また w3.orgオリエンテーション から

「高さ」メディア機能の値が「幅」メディア機能の値以上の場合、「向き」メディア機能は「縦」です。それ以外の場合、「向き」は「風景」です。

これが私たちが話している一般的なシミュレータである場合は、 ser-agent device detection を検討する必要があります。それでも、一部のサイトはサーバー側またはクライアント側のいずれかでそれに依存している可能性があります。そのため、XMLHTTPRequestを使用して手動でページをフェッチし、次に XMLHTTPRequest.setRequestHeader を使用してuser-agentをデバイスの電話のような外観に設定する必要があります

ここ iPhone6sのユーザーエージェント文字列の例：

Mozilla/5.0（iPhone; CPU iPhone OS 6_1_3 like Mac OS X）AppleWebKit/536.26（KHTML、like Gecko）バージョン/6.0 Mobile/10B329 Safari/8536.25

また、私は本当に言及する価値があるこのサイトに出くわしました： https://www.mydevice.io/

30
nullqube

さまざまな表示をシミュレートするには、次の手順を使用します。

1.右クリックchromeおよび選択済み検査

enter image description here

2. selectトグルデバイスツールバー

enter image description here

3.目的のディスプレイを選択します

enter image description here

4.選択表示後、ページを更新するためにプッシュ "Ctrl + F5"

enter image description here

9
Farhad Bagherlo

私はウェブアプリに精通しているだけなので、答えはそれに焦点を当てます。

画面サイズに関連するアプリのスタイルは、通常次の要素に依存しています。

  1. デバイスの幅/高さの比率。
  2. メディアクエリまたはJavaScriptを介して設定されたスタイルプロパティが原因でデバイスから報告された画面の幅/高さ。モバイルデバイスでは、通常、これは実際の解像度ではなく、「devicePixelRatio」と呼ばれる解像度で割った解像度です。

アプリの観点からモバイルデバイスをエミュレートするために、次のことができます。

  1. コンテナの比率を特定のモバイルデバイスの比率に設定します。これは、ウィンドウのサイズ変更と同じ方法で、またはモバイルの小さな画面と同じように、アプリの要素を移動/サイズ変更します。
  2. アプリを_<iframe>_要素に読み込み、幅/高さを_resolution / devicePixelRatio_に設定して、iframeの幅がメディアクエリをだますようにします、小さい画面のカスタムスタイルが有効になります。

これにより、アプリは「正しく」機能しますが、iframe要素は、通常のコンピューター画面上の実際のモバイルデバイスに比べて非常に大きく見えます。

ただし、これはコンピューター画面の解像度と物理サイズに依存します（プログラムで物理サイズまたはdpiを知ることはできず、ユーザーが推測または測定するだけです）。これは、コンピュータ画面で「実際のサイズ」のデバイスを取得することができないことを意味します。

「大きすぎる」問題を解決するために、メディアクエリが正しく機能しなくなるため、iframeのサイズを変更することはできません。したがって、CSS変換を使用してiframeをより適切なサイズにスケーリングする必要があります。次に、スケーリング係数をさまざまなコンピューター画面解像度に適合させることができます。

この概念は、次のjsfiddleに示されています。 https://codepen.io/Kasparas/pen/mxPOyY

エミュレータが表示している「アプリ」は、次の場所でホストされています。 https://kasparasanusauskas.github.io/stackoverflow-demos/demo-app-sensitive/index.html

「アプリ」には、いくつかの固定サイズのボックスと@media screen and (min-width:360px)メディアクエリがあり、画面の背景を360pxより大きい青色にします。これは、さまざまな画面でのレイアウトとメディアクエリの違いを示しています。

5
Kasparas Anusauskas

私が理解しているのは、ユーザーがWebページのセクションを操作できるようにすることです。ユーザーは、各デバイスのボタンなどを使用して、セクションの幅と高さを変更できます。セクションは、応答ページのように応答します。

過去に、同じドメインの別のページを指すiframeを設定しました。 iframeのサイズを変更すると、デバイスがシミュレートされます。

2
bymario

これをテストする必要があった過去には、CSSにカスタムのmaxwidth/maxheightプロパティを追加した後、ブラウザーのサイズを変更しました。これらの境界に達すると、関連するCSSが作動します。

1
daniel_sweetser

ハードウェア設定であるため、dpiは何にも使用できません。ビューポートリレーションを使用して、PXまたはインチ（JavaScriptで読み取ることができる実際のビューポートサイズに応じて計算）に応じて、希望する解像度％で表示する必要があります。

もう1つの素晴らしい、通常使用されるオプションは、必要なコンテンツを印刷するiframeオーバーレイを使用して電話のモックアップを設定することです。次に、抽出された例を示します。

iframe {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FFF;
    z-index: 5;
}
<img style="" src="http://www.mobilephoneemulator.com/images/devices/Apple-Iphone6-wm.jpg">
<iframe id="Iframe" name="Iframe" scrolling="no" frameborder="0" style="transform-Origin: 0px 0px 0px; left: 30px; top: 95px; width: 375px; height: 667px; transform: scale(1);" width="375" height="667" src=""></iframe>

最後に、シミュレートする必要があります。モックアップにレスポンシブな要素（または固定要素）を追加してそれに合わせてスケーリングできるので、モックアップに価値のある没入感が追加されます。モバイルデバイスをエミュレートすることは別の事実であり、現実的ではありません。

1
JoelBonetR