Html

響應式網站-不可缺少的Veiwport標籤

pig

• 2 min read
響應式網站-不可缺少的Veiwport標籤

什麼是Viewport標籤？


Viewport它是網頁HTML的一種META標籤，專為手機瀏覽器設計的。
有些屏幕很小的手機，但解析度卻可以做得很大，比如iphone7默認分辨率為：1920 * 1080，比許多電腦桌面的都還大，傳統ＰＣ網站直接放到手機上閱讀時，界面就會顯得非常小，閱讀體驗就很差，這時候就會需要一種將原始視圖在手機上放大的機制，使用Viewport標籤可以解決這個問題。

如何使用Viewport標籤？

將code放置在head裡面即可，如以下範例。
此範例的設定就會依照手機螢幕的解析度去做相對應的縮放了

!<!DOCTYPE html>
<html>
<head>
    <title>viewport</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

</body>
</html>

使用Viewport前：

使用Viewport後：

圖片取自w3schools

Viewport還有哪些屬性可以設定？

initial-scale：初始縮放比例 （一般都設定成1，設定手機螢幕畫面的初始縮放比例為 100%)
maximum-scale：允許縮放的最大比例（使用者可以在手機上縮放到最大的比例)
minimum-scale：允許縮放的最小比例（使用者可以在手機上縮放到最小的比例)
user-scalable：用戶是否允許手動縮放（可設定yes/no，設定yes使用者可以在手機上放大縮小整個網頁,設定no則取消縮放)