微信小程序寬高適配

小程序的寬任何機型都是750rpx，但是畫布canvas的默認單位是px，可能會出現需要怪異的樣式，我們可以用到

wx.getSystemInfoSync().windowWidth和

wx.getSystemInfoSync().windowHeight分別獲取到窗口的寬高，請注意獲取到的寬高單位都是px，所以需要利用寬度和750的比值轉換一下；

 

 

此外，小程序scroll-view組件也會遇到高度適配的問題，scroll-view需要給他一個固定的高度，但是所有的機型都用同一個高度就可能會出現scroll-view鋪不滿剩余高度，所以可以通過wx.getSystemInfoSync()獲取到屏幕的可用高度，減去其他固定的高度就可以讓scroll-view組件的鋪滿剩余的屏幕高度，避免不同機型出現怪異現象；

 

例如：我們已知該頁面除了scroll-view組件以外其余的組件高度為 150rpx; scroll-view組件的高度應該怎么做適配呢？

onload: function(){
    var windowWidth = wx.getSystemInfoSync().windowWidth;
    var windowHeight = wx.getSystemInfoSync().windowHeight;
    //rpx與px單位之間的換算 : 750/windowWidth = 屏幕的高度（rpx）/windowHeight
    var scroll_height = 750*windowHeight/windowWidth-150;
     this.setData({
        scroll_height:scroll_height
    })  
}

然后通過行內式把scroll-view組件的高度樣式填充完畢就完成了。

<scroll-view style="height:{{scroll_height}}rpx；">這里是scroll-view的內容</scroll-view>