为什么要使用视口值<meta>HTML 中的标记？

为什么在 HTML 的 标记中使用视口值？

视口是网页上对用户或页面访问者可见的内容区域。视口没有固定的尺寸，它随着屏幕尺寸的减小或增加视口而变化。

在早期不使用手机和平板电脑访问网页时，通常使用静态和固定尺寸的设计，但是当手机和平板电脑被引入互联网时，固定尺寸的页面对于这些屏幕来说非常大尺寸。然后，为了解决它，引入了HTML 视口。

句法：

这是用于各种设备变化网页的视口的常见实现。

• width = device-width：设置了一个特殊值的 width 属性，该值对于不同的屏幕宽度设备会变化到100%的比例。也可以为它分配一个以“px”为单位的固定值（即宽度 = 350px）。
• initial-scale = 1.0： initial-scale属性定义了网页在浏览器上首次加载时的初始缩放。

HTML 标签属性：

• initial-scale：该属性用于定义用于访问网页的设备的视口宽度。
• user-scalable：此属性允许设备放大或缩小，值为“yes”或“no”。
• width：该属性用于定义用于访问网页的设备的视口宽度。
• height：该属性用于定义用于访问网页的设备的视口高度。
• minimum-scale：此属性用于定义用户可以缩放页面的最小缩放级别。
• maximum-scale：此属性用于定义用户可以缩放页面的最大缩放级别。

示例 1：下面的示例说明了如果我们不使用内容在网页上的外观 带有视口值的标签。由于未使用 标记，因此未完全显示底部文本。

输出：

示例 2：以下代码演示了使用 标记的视口输出。输出相对于 iPhone 视口显示。

HTML

  

    
    
    
    

  

    

        
    
  
    
Welcome to GFG!
    
A computer science portal for all geeks.
    
Our Achievements: 
      
    

        Billions of Users, Millions of Articles 
        Published, Thousands Got Hired by Top 
        Companies and the numbers are still 
        growing.
    

  

输出：