1. 基于?rpx?單位進行布局適配

微信小程序采用 rpx 作為尺寸單位，以實現不同設備的布局適配。小程序的屏幕寬度固定為 750rpx，在不同設備上通過動態計算 1rpx 對應的像素值進行適配。例如，在 iPhone 6 中，屏幕寬度為 375px，因此 1rpx = 0.5px。通過這種方式，可以確保 UI 元素在不同設備上保持一致的視覺效果。

2. 判斷設備型號并應用特定樣式

在某些情況下，需要針對特定設備（如 iPhone X 及以上機型）應用不同的樣式。可以通過在頁面邏輯中判斷設備型號，并動態設置類名實現適配。例如：

在 data() 中定義變量 isIPX 來標識設備是否為 iPhone X：

3. 獲取設備信息并進行底部適配

在適配底部 TabBar 或其他 UI 元素時，需要考慮 iPhone X 以上機型的底部橫條（Home Indicator）。可以通過 uni.getSystemInfo 獲取設備信息，并根據 safeArea 的屬性計算底部適配值：

4. 判斷是否為全面屏設備

針對 iPhone X 及以上機型，可以通過判斷設備型號或安全區域的屬性來確定是否為全面屏設備。例如：

5. 其他適配注意事項

• 狀態欄高度：在不同設備上，狀態欄高度可能不同。可以通過 wx.getSystemInfoSync() 獲取狀態欄高度，并動態設置樣式。

• 字體和圖標適配：由于不同設備的顯示效果可能略有差異，建議使用矢量圖標庫（如 IconFont）或自適應字體大小。

• 兼容性測試：在實際開發中，建議在多種設備上進行測試，確保 UI 在不同設備上的兼容性。