Question

我有两个文件如下

的index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 101 Template</title>
  </head>
  <body>
    <h1>Hello, world   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</h1>   
  </body>
</html>

index2.html

<!DOCTYPE html>
<html lang="en">
  <head>    
    <meta name="viewport" content="width=device-width, initial-scale=1">   
    <title>Bootstrap 101 Template</title>
  </head>
  <body>
    <h1>Hello, world !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</h1>  
  </body>
</html>

当我更改浏览器窗口的大小时，上面两个html文档的行为方式相同。在第二个文档中实现的viewport元名称是什么？我在第二个文档中看到了使用meta标记的bootstrap文档及其所有css和js文件。通过这种方式使用它可以获得bootstrap的优势吗？

修改

出于某种原因，桌面浏览器对上述两个文档显示相同的行为，但是当我使用移动broswer（iphone中的safari）时，我看到了这两个文档的区别。第二个文档调整了与设备宽度匹配的内容。

Answer 1

这是因为Bootstrap使用viewport标记来优化其移动浏览器的样式表。您可以尝试更改HTML viewport的值，使用Chrome模拟器打开该页面并查看。

最好阅读有关视口的这些文档：

浏览器是否自行了解视口？

1 个答案: