什麼是Viewport標籤?


Viewport它是網頁HTML的一種META標籤,專為手機瀏覽器設計的。
有些屏幕很小的手機,但解析度卻可以做得很大,比如iphone7默認分辨率為:1920 * 1080,比許多電腦桌面的都還大,傳統PC網站直接放到手機上閱讀時,界面就會顯得非常小,閱讀體驗就很差,這時候就會需要一種將原始視圖在手機上放大的機制,使用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則取消縮放)

Summary
響應式網站-不可缺少的Veiwport標籤
Article Name
響應式網站-不可缺少的Veiwport標籤
Description
Viewport它是網頁HTML的一種META標籤,專為手機瀏覽器設計的。 有些屏幕很小的手機,但解析度卻可以做得很大,比如iphone7默認分辨率為:1920 * 1080,比許多電腦桌面的都還大,傳統PC網站直接放到手機上閱讀時,界面就會顯得非常小,閱讀體驗就很差,這時候就會需要一種將原始視圖在手機上放大的機制,使用Viewport標籤可以解決這個問題。
Author
Publisher Name
一群棒子
Publisher Logo

Facebook 功能: