響應式設計時如何自動阻止行動瀏覽器自動調整頁面大小

標籤：

眾所周知，設計響應式頁面的時候，經常會碰到某些瀏覽器他會縮小整個頁面的大小來防止出現頁面被截取的情況，

我們需要通過放大才能看到其中的內容。這是行動瀏覽器自動調整頁面的功能。

這樣就完全達不到響應式的要求。

那麼問題來了，如何阻止瀏覽器自動調整頁面大小呢。

有時候看別人寫好的響應式代碼的時候，系不系經常會看到head標籤中經常會出現如下代碼

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

<meta>標籤，name="viewport"不言而喻，指的是對視口進行調控，content="initial-scale=2.0" 的意思是將頁面放大兩倍（同理，0.5表示縮小一半，3.0表示放大3倍），

同時，width=device-width告訴瀏覽器頁面的寬度應該等於裝置寬度。

<meta>標籤還可以控制頁面可縮放的範圍。下面的代碼允許使用者將頁面最多放大至裝置寬度的3倍，最小壓縮至設別的一半。

<meta name="viewport" content="maximum-scale=3.0,minimum-scale="0.5",width=device-width"/>

當然，也可以禁止縮放，

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

響應式設計時如何自動阻止行動瀏覽器自動調整頁面大小