Meta标簽實作阻止移動裝置(手機、Pad)的浏覽器輕按兩下放大網頁

一、背景

　　在當今這個移動裝置發展越來越快，并且技術越來越成熟的時代，移動裝置成了企業擴充業務不可或缺的重要領域之一，随之而來的是适應手機的網站層出不窮，在開發過程中，我們往往會遇到一個很尴尬的問題：移動端網頁在使用者輕按兩下螢幕時會變大，導緻整個頁面的布局錯誤，非常 影響最終效果，下面介紹一種通過html的meta标簽來阻止該現象發生的辦法。

二、解決辦法和原理

　　1.首先設定網頁的DOCTYPE

　　2.在網頁的 head 之中添加 viewport meta 标簽，如下所示：

　　width 屬性控制裝置的寬度。假設您的網站将被帶有不同螢幕分辨率的裝置浏覽，那麼将它設定為 device-width 可以確定它能正确呈現在不同裝置上。

　　initial-scale=1.0 確定網頁加載時，以 1:1 的比例呈現，不會有任何的縮放。

　　user-scalable=no在移動裝置浏覽器上可以禁用其縮放（zooming）功能。

　　maximum-scale=1.0通常情況下與 user-scalable=no 一起使用。這樣禁用縮放功能後，使用者隻能滾動螢幕，就能讓您的網站看上去更像原生應用的感覺。

三、總結

　　這樣設定完成以後，我們就完成了阻止移動裝置上輕按兩下導緻網頁放大以緻網頁布局錯亂的問題，有木有很開心？