It will not affect the actual value of viewport. In other words, for browsers on ordinary computers, there is no difference whether the viewport is set or not. <\/p>\n\n

\n \n \n Firefox on mobile\n<\/h3>\n\n

If the viewport is not set, change the viewport setting of the HTML content just now into annotation:
\n<\/p>\n\n

  \n<\/pre>\n\n\n\n
Firefox on mobile phone displays as follows: <\/p>\n\n
<\/p>\n\n
Enlarge the reduced part and you will see: <\/p>\n\n
<\/p>\n\n
Since the default viewport width is 980, in order to fully display the horizontal content of the web page, it is automatically reduced to 0.4224 times in order to display the horizontal content of the web page. This multiple is larger than the default value of minimum-scale of 0.1, and will replace the minimum-scale setting. Even if the user reduces the display by himself, he can only reduce the display to 0.4224 times at most. <\/p>\n\n
\n  \n  \n  Set the viewport to be the same width as the screen\n<\/h4>\n\n
If you add the viewport settings back: 
\n<\/p>\n\n
  \n<\/pre>\n\n\n\n
The screen you see will be like this: <\/p>\n\n
<\/p>\n\n
You can see that the width of the viewport (window.innerWidth) and the width of the device screen (window.screen.width) are the same, both are 414px. The webpage will be displayed with this width, and the zoom factor is 1. OK Clearly read the displayed web page content. Since this is the maximum zoom factor that can display horizontal content on a web page, it will also replace the default minimum-scale of 0.1. Users can only zoom the page to a minimum of 1 times. <\/p>\n\n
If you keep the default zoom factor of 1, but don’t set the viewport width, like this: 
\n<\/p>\n\n
  \n<\/pre>\n\n\n\n
The actual result is the same as setting the width to device-width. <\/p>\n\n
\n  \n  \n  Deliberately set the viewport width\n<\/h4>\n\n
If you deliberately set the viewport width to 980: 
\n<\/p>\n\n
  \n<\/pre>\n\n\n\n
 will be displayed as follows: <\/p>\n\n
<\/p>\n\n
Since the width of the viewport is now wider than the screen, it will extend outside the screen during arrangement. You can also see from the actual displayed results that the screen width is indeed 980. <\/p>\n\n
If you deliberately set the viewport width to be narrower than the screen, like: 
\n<\/p>\n
\n<\/pre>\n\n\n\n
The browser will use the screen width as the lowest viewport width, so the display result will be the same as setting the width to device-width: <\/p>\n\n
<\/p>\n\n
If you only set the viewport width, but not the initial-scale, like this: 
\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)聽(tīng)縮放變化
      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ù) = 
      
    
  

  







It will not affect the actual value of viewport. In other words, for browsers on ordinary computers, there is no difference whether the viewport is set or not. 


  
  
  Firefox on mobile


If the viewport is not set, change the viewport setting of the HTML content just now into annotation: 



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




Firefox on mobile phone displays as follows: 



Enlarge the reduced part and you will see: 



Since the default viewport width is 980, in order to fully display the horizontal content of the web page, it is automatically reduced to 0.4224 times in order to display the horizontal content of the web page. This multiple is larger than the default value of minimum-scale of 0.1, and will replace the minimum-scale setting. Even if the user reduces the display by himself, he can only reduce the display to 0.4224 times at most. 


  
  
  Set the viewport to be the same width as the screen


If you add the viewport settings back: 



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




The screen you see will be like this: 



You can see that the width of the viewport (window.innerWidth) and the width of the device screen (window.screen.width) are the same, both are 414px. The webpage will be displayed with this width, and the zoom factor is 1. OK Clearly read the displayed web page content. Since this is the maximum zoom factor that can display horizontal content on a web page, it will also replace the default minimum-scale of 0.1. Users can only zoom the page to a minimum of 1 times. 

If you keep the default zoom factor of 1, but don’t set the viewport width, like this: 



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




The actual result is the same as setting the width to device-width. 


  
  
  Deliberately set the viewport width


If you deliberately set the viewport width to 980: 



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




 will be displayed as follows: 



Since the width of the viewport is now wider than the screen, it will extend outside the screen during arrangement. You can also see from the actual displayed results that the screen width is indeed 980. 

If you deliberately set the viewport width to be narrower than the screen, like: 


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




The browser will use the screen width as the lowest viewport width, so the display result will be the same as setting the width to device-width: 



If you only set the viewport width, but not the initial-scale, like this: 





  
  <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)聽(tīng)縮放變化
      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ù) = 
      
    
  

  






Still using 1.0 as the starting zoom factor. 


  
  
  Set a starting multiple greater than 1


If you change the zoom factor, you can use the specified zoom factor after the web page is first loaded, for example: 



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




You will see the result magnified 3 times: 



Please note that initial-scale is only valid for the first time the web page is loaded. Even if you modify the settings and reload the web page, if the original zoom factor of the web page is within the newly set zoom range, the original zoom factor will be maintained. Therefore, it is recommended to open a new privacy page to test more accurately, otherwise it may happen that modifying the initial-scale does not change the display ratio. 

If you just want to force users to view the webpage at a magnification level, you can set minimum-scale, but this should be more correct if the webpage content is enlarged from the beginning. 


  
  
  Set a starting multiple less than 1


Initial-scale can also be set to less than 1, that is, the display is reduced. However, if the viewport width is proportionally reduced to be smaller than the screen width, it will violate the rule that the browser can only be reduced to a minimum size that can display the complete horizontal content of the web page. It will automatically divide the currently set viewport width by the reduction factor, so that the web page can maintain complete horizontal content when it is reduced to the minimum multiple. For example, if set to 0.5: 



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




 will change the width of the viewport to 414/0.5=828px: 



Zoom in to see detailed data: 



If you initially set the viewport width to be wide enough, the setting in the meta tag will be maintained, for example: 



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




The results are as follows: 



You can see the width remains unchanged: 




  
  
  Display of pictures


If you put an image in a web page, the resolution of the image will be interpreted in px units, so a 200×200 image will be 400×400 on a device with devicePixelRatio of 2 Physical pixels are displayed. For example, we added a picture at the end of the web page just now: 


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




This is a 584×604 size image: 



The web page displays the results as follows: 



You will see that because the image is wider, it exceeds the screen boundary, but the overall page is still arranged according to the width set by the viewport, so box No. 4 is squeezed into the second column. In this case, the factor that the user can reduce can be smaller than the 1.0 set by initial-scale, and can be as small as the width of the image that can be fully displayed, like this: 



In the picture above, it has been reduced to 0.749 times. 

If you deliberately set the viewport width to be the same width as the image: 



You can see that the results are different from the previous result. Now the two squares 4 and 5 above are ranked in the first column. This is because the viewport setting has become wider. 


          

            
        
The above is the detailed content of Viewport setting in HTML meta tag. For more information, please follow other related articles on the PHP Chinese website!