Question

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

将此元标记放入标题时实际发生了什么？

Answer 1

Mobile Safari引入了“viewport元标记”，让Web开发人员可以控制视口的大小和比例。

使用视口元标记改进网络的展示内容。通常，您使用视口元标记来设置宽度和视口的初始比例。例如，如果您的网页是窄于980像素，那么你应该设置宽度视口适合您的网站内容。如果您正在设计电话或平板电脑专用的Web应用程序，然后将宽度设置为宽度该设备。

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

width属性控制视口的大小。它可以设置为   特定数量的像素，如width = 600或特殊值   device-width是屏幕宽度，以像素为单位的CSS像素   100％（有相应的高度和设备高度值，   这对于包含更改大小或元素的元素的页面可能很有用   基于视口高度的位置。）

初始缩放属性控制页面的缩放级别   先加载。最大规模，最小规模和用户可扩展性   属性控制用户如何放大或缩小页面。

来源： - MDN，developer.apple

Answer 2

do {
  // local scope
  let x = 10
  print(x)
}

// global scope
let x = "string"
print(x)

<meta name="viewport" content="width=device-width, initial-scale=1.0">视口元素为浏览器提供了有关如何操作的说明   控制页面的尺寸和缩放。

<meta>部分设置要遵循的页面宽度   设备的屏幕宽度（根据设备的不同而不同）。

width=device-width部分设置页面的初始缩放级别   首先由浏览器加载。

该代码仅影响移动浏览器上的视图。您可以在移动浏览器上看到差异。

如果您将该代码放入标题中，则您在任何移动浏览器上的视图都不会与桌面视图相同。但视图将根据您的设备宽度而变化。

viewport有什么用？

2 个答案: