移动优先 Bootstrap


Bootstrap 自 Bootstrap 3 开始变得移动优先。这意味着可以在整个库中找到“移动优先”风格,而不是在单独的文件中找到它们。你需要将视窗元标记添加到 <head> 元素中,以确保正确呈现和触控缩放移动设备上的内容。

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

如下:

  • 宽度 属性控制设备的宽度。将其设置为设备宽度将确保它能在各种设备(移动设备、台式机、平板电脑等)上正确呈现。
  • initial-scale = 1.0 确保在加载时,你的网页将以 1:1 的比例呈现,并且开箱即用时不会应用缩放。

添加 user-scalable = no 到内容属性中以禁用移动设备上的缩放功能,如下所示。此更改后,用户只能滚动,不能缩放,从而使你的网站感觉更像原生应用程序。

<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">

更新于:2020 年 6 月 12 日

1000+ 浏览

开始您的 职业生涯

完成课程即可获得认证

开始
广告