設置視口是確保網頁在移動設備正確顯示的關鍵。通過標簽可控制頁面寬度、縮放比例等，常見參數包括width=device-width使頁面寬度匹配設備屏幕，initial-scale=1.0設定初始縮放為1，maximum-scale和minimum-scale限制縮放范圍，user-scalable=no禁用用戶縮放。使用時需避免固定寬度值、謹慎禁用縮放，并考慮高分辨率屏適配。
設置視口（viewport）是網頁在移動設備上正確顯示的關鍵一步，而標簽就是用來控制這個設置的。它直接影響頁面在手機或平板瀏覽器中的縮放行為和布局表現。
什么是視口？
簡單來說，視口就是用戶在設備屏幕上能看到的網頁區域大小。不同設備屏幕尺寸不同，為了讓網頁在各種設備上都能正常顯示，就需要通過視口設置來告訴瀏覽器怎么處理頁面的寬度和縮放比例。
的作用
是一個html標簽，通常寫在網頁的
部分，用于控制網頁在移動設備上的顯示方式。它能指定頁面的初始縮放比例、最大/最小縮放級別、是否允許用戶手動縮放等。
立即學習“前端免費學習筆記（深入）”；
最常見的寫法是：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
這段代碼的意思是：讓頁面的寬度等于設備的屏幕寬度，并且初始縮放比例為1.0，也就是不縮放。
如果不加這個標簽，很多手機瀏覽器會用一個默認的視口寬度（比如980px），然后把整個頁面縮小來適應屏幕，這樣文字和按鈕就會變得很小，用戶需要手動放大才能看清楚。
常見的幾個參數說明
- width=device-width：將頁面的寬度設為設備的屏幕寬度（單位是css像素）。
- initial-scale=1.0：頁面初次加載時的縮放比例。
- maximum-scale=1.0 和 minimum-scale=1.0：限制用戶可以縮放的最大和最小比例。
- user-scalable=no：禁止用戶手動縮放頁面（有些網站為了防止誤操作會使用這個）。
舉個例子，如果你做一個移動端優先的電商網站，你可能希望用戶不能縮放商品詳情頁，避免影響閱讀體驗，那就可以加上：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
不過要注意的是，蘋果從ios 10開始已經忽略user-scalable=no了，所以這個設置并不是在所有設備上都有效。
設置視口時容易忽略的問題
很多人以為只要寫了width=device-width就萬事大吉了，其實還有一些細節需要注意：
- 不要固定width為具體數值：比如寫成width=600，這會讓頁面在不同設備上表現不一致，失去了響應式的意義。
- 慎用user-scalable：雖然可以禁用縮放，但會影響用戶體驗，特別是視力有障礙的人群。
- 適配高分辨率屏幕：一些高清屏會用到viewport-fit=cover來配合劉海屏的顯示，比如iphone X及以后機型。
基本上就這些。設置視口看起來簡單，但卻是移動端開發中非常基礎又關鍵的一環。只要合理使用，就能讓你的網頁在手機上看起來更舒服、用起來更順手。
