支付寶小程序動畫效果適配(微信小程序同)

  • 前景:在做位移等動畫效果時,所要求填寫的距離參數沒有單位,據實測是手機的分辨率,物理像素乘以dpr。導致在不同手機上移動距離不相同,適配很不好
  • 解決:使用小程序的獲取系統信息方法my.getSystemInfo獲取windowWidth(窗口寬度)和pixelRatio (設備像素比)計算出當前rpx倍數(這裏使用的750指的是設計圖的尺寸,可以根據設計圖的大小進行更改),使用的時候將需要的rpx值(即設計圖標註的距離)乘以這個倍數就得到要填的值了
  • 處理代碼如下:
my.getSystemInfo({
	success: (res) => {
		console.log(res.windowWidth);   // 窗口寬度
		console.log(res.pixelRatio);   // 設備像素比
		var times = res.windowWidth * res.pixelRatio / (750 * res.pixelRatio);  // 計算得到的當前rpx倍數
		console.log(100 * times);    //任意rpx(例:100rpx) 轉換成的值(iphone6手機上值爲50)
		console.log(750 * times);    //任意rpx(例:750rpx) 轉換成的 值(iphone6手機上值爲375)
	}
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章