移動優先 Bootstrap


Bootstrap 在 Bootstrap 3 之後已經優先考慮移動裝置了。這意味著各種裝置都可找到“移動優先”樣式,而不是在單獨的檔案中。您需要將視口元標記新增到 <head> 元素中,以確保正確渲染和在移動裝置上進行觸控縮放。

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

在此處,

  • 寬度屬性控制裝置的寬度。將其設定為裝置寬度將確保它在各種裝置(移動裝置、桌上型電腦、平板電腦...)上得到適當的渲染。
  • 初始比例 = 1.0 確保當載入頁面時,您的網頁將以 1:1 的比例渲染,並且開箱即用不會應用任何縮放。

新增使用者可縮放 = 在內容屬性中停用 no,以在移動裝置上停用縮放功能,如下所示。使用此更改,使用者只能滾動而不能縮放,這能讓您的網站感覺更像原生應用程式。

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

更新於: 2020 年 6 月 12 日

1 千次以上瀏覽量

職業生涯的開端

透過完成課程獲得認證

開始
廣告
© . All rights reserved.