ビューポートの実際の値には影響しません。つまり、一般的なコンピュータのブラウザでは、ビューポートが設定されているかどうかに違いはありません。 <\/p>\n\n

\n \n \n モバイル版Firefox\n<\/h3>\n\n

ビューポートが設定されていない場合は、先ほどの HTML コンテンツのビューポート設定をアノテーションに変更します:
\n<\/p>\n\n

  \n<\/pre>\n\n\n\n
攜帯電話の Firefox は次のように表示されます: <\/p>\n\n
<\/p>\n\n
縮小された部分を拡大すると、次のようになります。<\/p>\n\n
<\/p>\n\n
デフォルトのビューポート幅は980であるため、Webページの水平方向のコンテンツを完全に表示するために、Webページの水平方向のコンテンツを表示するために自動的に0.4224倍に縮小されます。この倍數(shù)は最小スケールのデフォルト値である 0.1 より大きく、ユーザーが自分で表示を縮小しても、最大 0.4224 倍までしか表示を縮小できません。 <\/p>\n\n
\n  \n  \n  ビューポートを畫面と同じ幅に設定します\n<\/h4>\n\n
ビューポート設定を元に戻す場合: 
\n<\/p>\n\n
  \n<\/pre>\n\n\n\n
次のような畫面が表示されます: <\/p>\n\n
<\/p>\n\n
ビューポートの幅 (window.innerWidth) とデバイス畫面の幅 (window.screen.width) が同じで、どちらも 414 ピクセルであることがわかります。Web ページはこの幅で表示されます。ズーム倍率は 1 です。 OK 表示された Web ページのコンテンツをはっきりと読みます。これは、Web ページ上に水平方向のコンテンツを表示できる最大ズーム倍率であるため、ユーザーはページを最小 1 倍までしかズームできないデフォルトの最小スケールも置き換えられます。 <\/p>\n\n
次のように、デフォルトのズーム係數(shù) 1 を維持し、ビューポートの幅を設定しない場合: 
\n<\/p>\n\n
  \n<\/pre>\n\n\n\n
実際の結(jié)果は、幅を device-width に設定した場合と同じになります。 <\/p>\n\n
\n  \n  \n  ビューポートの幅を意図的に設定する\n<\/h4>\n\n
ビューポートの幅を意図的に 980 に設定した場合: 
\n<\/p>\n\n
  \n<\/pre>\n\n\n\n
は次のように表示されます: <\/p>\n\n
<\/p>\n\n
ビューポートの幅が畫面よりも広くなったので、配置時に畫面外にはみ出してしまいますが、実際の表示結(jié)果からも畫面幅が確かに980であることがわかります。 <\/p>\n\n
次のように、意図的にビューポートの幅を畫面よりも狹く設定した場合: 
\n<\/p>\n
\n<\/pre>\n\n\n\n
ブラウザは畫面の幅をビューポートの最小幅として使用するため、表示結(jié)果は幅を device-width に設定した場合と同じになります。<\/p>\n\n
<\/p>\n\n
次のようにビューポートの幅のみを設定し、初期スケールは設定しない場合: 
\n<\/p>\n\n
\n\n  \n  \n  
  <script>
    window.addEventListener('load', function() {
      document.getElementById('devicePixelRatio').textContent = window.devicePixelRatio;
      document.getElementById('screenWidth').textContent = window.screen.width;
      document.getElementById('innerWidth').textContent = window.innerWidth;

      // 取得並顯示目前的縮放倍數(shù)
      function updateScale() {
        const currentScale = window.visualViewport ? window.visualViewport.scale : '不支援';
        document.getElementById('currentScale').textContent = currentScale;
      }

      // 初始化顯示
      updateScale();

      // 監(jiān)聽縮放變化
      if (window.visualViewport) {
        window.visualViewport.addEventListener('resize', updateScale);
      }
    });
  </script>


  1
  2
  3
  4
  5
  6
  7
  8

  

    

      window.devicePixelRatio = 
      
    
    

      window.screen.width = 
      
    
    

      window.innerWidth = 
      
    
    

      目前縮放倍數(shù) = 
      
    
  

  







ビューポートの実際の値には影響しません。つまり、一般的なコンピュータのブラウザでは、ビューポートが設定されているかどうかに違いはありません。 


  
  
  モバイル版Firefox


ビューポートが設定されていない場合は、先ほどの HTML コンテンツのビューポート設定をアノテーションに変更します: 



  <meta name="viewport" content="width=1200, initial-scale="1.0">




攜帯電話の Firefox は次のように表示されます: 



縮小された部分を拡大すると、次のようになります。



デフォルトのビューポート幅は980であるため、Webページの水平方向のコンテンツを完全に表示するために、Webページの水平方向のコンテンツを表示するために自動的に0.4224倍に縮小されます。この倍數(shù)は最小スケールのデフォルト値である 0.1 より大きく、ユーザーが自分で表示を縮小しても、最大 0.4224 倍までしか表示を縮小できません。 


  
  
  ビューポートを畫面と同じ幅に設定します


ビューポート設定を元に戻す場合: 



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




次のような畫面が表示されます: 



ビューポートの幅 (window.innerWidth) とデバイス畫面の幅 (window.screen.width) が同じで、どちらも 414 ピクセルであることがわかります。Web ページはこの幅で表示されます。ズーム倍率は 1 です。 OK 表示された Web ページのコンテンツをはっきりと読みます。これは、Web ページ上に水平方向のコンテンツを表示できる最大ズーム倍率であるため、ユーザーはページを最小 1 倍までしかズームできないデフォルトの最小スケールも置き換えられます。 

次のように、デフォルトのズーム係數(shù) 1 を維持し、ビューポートの幅を設定しない場合: 



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




実際の結(jié)果は、幅を device-width に設定した場合と同じになります。 


  
  
  ビューポートの幅を意図的に設定する


ビューポートの幅を意図的に 980 に設定した場合: 



  <meta name="viewport" content="initial-scale=1.0">




は次のように表示されます: 



ビューポートの幅が畫面よりも広くなったので、配置時に畫面外にはみ出してしまいますが、実際の表示結(jié)果からも畫面幅が確かに980であることがわかります。 

次のように、意図的にビューポートの幅を畫面よりも狹く設定した場合: 


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




ブラウザは畫面の幅をビューポートの最小幅として使用するため、表示結(jié)果は幅を device-width に設定した場合と同じになります。



次のようにビューポートの幅のみを設定し、初期スケールは設定しない場合: 





  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <script>
    window.addEventListener('load', function() {
      document.getElementById('devicePixelRatio').textContent = window.devicePixelRatio;
      document.getElementById('screenWidth').textContent = window.screen.width;
      document.getElementById('innerWidth').textContent = window.innerWidth;

      // 取得並顯示目前的縮放倍數(shù)
      function updateScale() {
        const currentScale = window.visualViewport ? window.visualViewport.scale : '不支援';
        document.getElementById('currentScale').textContent = currentScale;
      }

      // 初始化顯示
      updateScale();

      // 監(jiān)聽縮放變化
      if (window.visualViewport) {
        window.visualViewport.addEventListener('resize', updateScale);
      }
    });
  </script>


  1
  2
  3
  4
  5
  6
  7
  8

  

    

      window.devicePixelRatio = 
      
    
    

      window.screen.width = 
      
    
    

      window.innerWidth = 
      
    
    

      目前縮放倍數(shù) = 
      
    
  

  






開始ズーム係數(shù)として引き続き 1.0 を使用します。 


  
  
  開始倍數(shù)を 1 より大きく設定します


ズーム率を変更する場合は、Web ページが最初に読み込まれた後に、指定したズーム率を使用できます。次に例を示します。



  <meta name="viewport" content="width=1200, initial-scale="1.0">




結(jié)果が 3 倍に拡大されて表示されます: 



Web ページの元のズーム率が新しく設定されたズーム範囲內(nèi)にある場合でも、初期スケールは Web ページが初めて読み込まれるときにのみ有効であることに注意してください。 、元のズーム率が維持されます。したがって、新しいプライバシー ページを開いてより正確にテストすることをお勧めします。そうしないと、初期スケールを変更しても表示率が変わらない可能性があります。 

ユーザーに Web ページを一定の倍率で表示させるだけの場合は、最小スケールを設定できますが、Web ページのコンテンツが最初から拡大されている場合は、これがより適切です。 


  
  
  開始倍數(shù)を 1 未満に設定します


Initial-scale を 1 未満に設定することもできます。つまり、表示が縮小されます。ただし、ビューポートの幅が畫面の幅よりも小さくなるように比例的に縮小すると、ブラウザーでのみ許可されるルールに違反します。 Web ページの完全な水平方向のコンテンツを表示できる最小サイズに縮小されると、現(xiàn)在設定されているビューポートの幅が自動的に縮小率で除算され、最小倍數(shù)に縮小されたときに Web ページが完全な水平方向のコンテンツを維持できるようになります。 。たとえば、0.5 に設定した場合: 



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




 はビューポートの幅を 414/0.5=828px に変更します: 



ズームインして詳細データを表示します: 



最初にビューポートの幅を十分に広く設定した場合、メタ タグの設定は維持されます。例: 



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




結(jié)果は次のとおりです: 



幅が変更されていないことがわかります: 




  
  
  寫真の展示


Web ページに畫像を配置すると、畫像の解像度は px 単位で解釈されるため、devicePixelRatio が 2 のデバイスでは 200×200 の畫像が 400×400 の物理ピクセルで表示されます。たとえば、先ほど Web ページの最後に畫像を追加しました: 


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




これは 584×604 サイズの畫像です: 



Web ページには次のように結(jié)果が表示されます: 



畫像の幅が広いため、畫面の境界を超えていることがわかりますが、ページ全體は依然としてビューポートで設定された幅に従って配置されているため、ボックス番號 4 は 2 列目に押し込まれています。この場合、ユーザーが縮小できる係數(shù)は、次のように、initial-scale で設定された 1.0 よりも小さく、完全に表示できる畫像の幅と同じくらい小さくすることができます。




上の図では、0.749倍に減少しています。 


意図的にビューポートの幅を畫像と同じ幅に設定した場合: 





上の 2 つの四角形 4 と 5 が最初の列にランク付けされていることがわかります。これは、ビューポートの設定が広くなったためです。 



          

            
        
以上がHTMLメタタグでのビューポート設定の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。