☰

ウェブページのセクションでモバイル解像度をシミュレートする 質問する

tag-icon • tag-icon html css mobile
ウェブページのセクションでモバイル解像度をシミュレートする 質問する

私は主にデスクトップの大型スクリーン モニターで使用される 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 とは異なります。

携帯電話上での見た目や配置をシミュレートする最適な方法は何でしょうか? 長さと高さの相対比率だけを取り、ppi を無視すればうまくいくでしょうか?

注記

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

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

ベストアンサー1

DPI設定はどのWeb言語（HTML/CSS/JS）でも設定できません。しかし、シミュレーションに関しては、コードをiframeまたはdivに配置し、iframe内でWebサイトをロードして、CS transform:scale()ページ全体の拡大縮小は、携帯電話の PPI に応じて異なります。

あなたが見る例えばiPhone6sもっている750 x 1334 ネイティブ解像度（ピクセル）しかし375 x 667 UIKit サイズ (ポイント)そしてそのネイティブスケール係数 2.0。 あなたはできる見るでCSS メディアクエリ375 x 667でレンダリングし、ネイティブ係数（ここでは2.0）でスケーリングしてデバイスのディスプレイに合わせます（ソフトなアンチエイリアスのような効果この操作の間に発生する可能性があります)。

そして、画面をシミュレートするには326ppiのためにiPhone6s私のiMac 27インチ2012ではどうやら 108.79ppi(通常は 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 のオリエンテーション

「高さ」メディア特性の値が「幅」メディア特性の値以上の場合、「方向」メディア特性は「縦」になります。それ以外の場合、「方向」は「横」になります。

これが一般的なシミュレーターの話であれば、考慮すべき点があります。ユーザーエージェントデバイス検出ただし、サーバー側またはクライアント側でこれに依存しているサイトもあります。その場合は、手動でページを取得しXMLHTTPRequest、ユーザーエージェントを設定する必要があります。XMLHTTPRequest.setRequestHeader携帯電話に似たデバイス

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

Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3、Mac OS X に類似) AppleWebKit/536.26 (KHTML、Gecko に類似) Version/6.0 Mobile/10B329 Safari/8536.25

また、私は本当に言及する価値のあるこのサイトに出会いました:翻訳元

おすすめ記事