標籤：user 螢幕寬度 百分比 port 不同的 使用 window min name
影響因素：1 裝置物理像素 2 縮放 3 dpr
設定理想視口
<meta name="viewport" content="width=device-width,initial-scale=1.0">
方法1 固定高度，寬度自適應：垂直方向用定值，水平方向百分比、定值、flex都行。
原理：<meta name="viewport" content="width=device-width,initial-scale=1">
方法2 固定寬度，viewport縮放： viewport width使用一個寬度，瀏覽器自動完成縮放，單位使用px。
原理：需要根據螢幕寬度動態產生viewport,產生的類似<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
方法3 rem做寬度，viewport縮放
根據螢幕寬度設定rem值，需要適配的元素使用rem，不需要是配的元素使用px。
原理：1 動態產生viewport ，設定為1/dpr 2 螢幕寬度設定rem大小，即給 html設定font-size 3 根據裝置像素比 window.devicePixelRatio 給設定data-dpt
<html data-dpr="2" style="font-size:40px;> <meta name=‘viewport‘ content=‘initial-scale=0.5,...>
這樣使不同的裝置的rem和px都顯示的一樣長。
移動端適配
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
