bootstrap如何適配

這篇文章給大家分享的是有關(guān)bootstrap如何適配的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

bootstrap怎么適配

bootstrap屏幕適配

為了讓 Bootstrap 開(kāi)發(fā)的網(wǎng)站對(duì)移動(dòng)設(shè)備友好，確保適當(dāng)?shù)睦L制和觸屏縮放，需要在網(wǎng)頁(yè)的 head 之中添加 viewport meta 標(biāo)簽，如下所示：

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

width 屬性控制設(shè)備的寬度。假設(shè)您的網(wǎng)站將被帶有不同屏幕分辨率的設(shè)備瀏覽，那么將它設(shè)置為 device-width 可以確保它能正確呈現(xiàn)在不同設(shè)備上。

initial-scale=1.0 確保網(wǎng)頁(yè)加載時(shí)，以 1:1 的比例呈現(xiàn)，不會(huì)有任何的縮放。

在移動(dòng)設(shè)備瀏覽器上，通過(guò)為 viewport meta 標(biāo)簽添加 user-scalable=no 可以禁用其縮放（zooming）功能。

通常情況下，maximum-scale=1.0 與 user-scalable=no 一起使用。這樣禁用縮放功能后，用戶只能滾動(dòng)屏幕，就能讓您的網(wǎng)站看上去更像原生應(yīng)用的感覺(jué)。

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

感謝各位的閱讀！關(guān)于bootstrap如何適配就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！