携帯端末のiframe内のレスポンシブなウェブサイト

Question

私はこれを理解するのに苦労していました。 私は責任あるウェブサイトを持っており、私はIframeによってそれを呼び出そうとしていました。 これはデスクトップ上では完全に機能しましたが、モバイルデバイスではあまりにも少なかったようです。

<iframe src="https://religious-freedom.herokuapp.com"></iframe> 

CSS

  iframe:focus { 
      outline: none; 
     } 
     iframe { 
      margin: none; 
      border: 0; 
      width: 100%; 
      height: 100%; 
      position: absolute; 
      display: block; 
     } 


     body { 
      display: block; 
      margin: 0; 
      -webkit-overflow-scrolling: touch; 
     } 

Answer 1

それはスマートフォンの物理的な大きさが奇妙であることが判明しました。

ビューポートは、Webページがモバイルデバイスにどのように表示されるかを制御します。ビューポートがないと、モバイルデバイスはページを画面に合わせて標準的なデスクトップ画面幅にレンダリングします。ビューポートを設定すると、異なるデバイスでページの幅とスケーリングを制御できます。モバイルデバイス上でうまく表示するように最適化

ページは

幅=デバイス幅、初期スケール= 1を指定する文書の先頭にメタビューポートを含むべきです。

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