在我們用手機或平板電腦瀏覽網頁時，你是否曾發現有些網頁能夠很好地適應屏幕，而有些卻需要左右滑動才能完整顯示內容？這就涉及到一個神奇的東西——Viewport Meta 標記。
最近本人在研究自適應的各自實現方法，比如media媒體查詢、自適應布局等，其中很常見的也是大家經常默認中就使用到的一個內容是Viewport Meta 標記。
什么是Viewport？
Viewport（視口）簡單來說，就是你在屏幕上能看到的區域。在桌面瀏覽器中，這通常是整個瀏覽器窗口，但在移動設備上，情況就復雜了。因為移動設備的屏幕尺寸各不相同，Viewport Meta 標記就變得尤為重要。
Viewport Meta 標記是什么？
Viewport Meta 標記是一種HTML標簽，它告訴瀏覽器如何設置網頁的視口。通過在HTML文檔的頭部添加類似下面的代碼：
<meta name="viewport" content="width=device-width, initial-scale=1.0">這段代碼告訴瀏覽器，網頁的寬度應該等于設備的寬度，并且初始縮放比例應該為1.0。這有助于確保網頁在不同設備上都能夠良好顯示。
我們還可以設置其他屬性定義瀏覽器渲染頁面的尺寸和縮放級別規則。
具體屬性的內容和含義可以參考文檔：viewport meta 標記 - HTML（超文本標記語言） | MDN (mozilla.org)
為什么需要Viewport Meta 標記？
1. 響應式設計：?移動設備的屏幕尺寸多種多樣，Viewport Meta 標記可以幫助網頁自動調整布局，以適應不同尺寸的屏幕，使得用戶無論用大屏手機還是小屏平板都能有良好的瀏覽體驗。
2. 禁用縮放：?有些網頁希望用戶不能通過手勢縮放來改變頁面布局，Viewport Meta 標記可以幫助網頁開發者控制這個行為。
即設置屬性：user-scalable：no或0。
3. 移動設備優化：?通過設置Viewport，網頁可以更好地利用移動設備的屏幕空間，提供更友好的用戶界面。
如何使用Viewport Meta 標記？
在HTML文檔的`<head>`標簽中加入以下代碼即可：
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 其他頭部信息 -->
</head>通過設置不同的屬性值，你可以調整Viewport的行為，以滿足你網頁的需求。
當然，在vue3的開發框架中，我們只需要在根html中加上meta標簽即可實現全局的Viewport Meta標記。
加上之后，打開瀏覽器開發者工具，切換窗口類型，可以看到顯著的效果。
)
