現在主流的全面屏已經佔用很多的市場，那麼通常開發會遇到些問題，比如要去根據普通屏或是全面屏做一些相應的展示，接下來我這邊的需求是展示不同大小的圖片

首先在公共的js檔案裡簡單封裝；

/**判斷螢幕大小 */
  function	judgeBigScreen() {  //，這裡根據返回值 true 或false ,返回true的話 則為全面屏 
	let result = false;
		const rate = window.screen.height / window.screen.width;    
		let limit =  window.screen.height == window.screen.availHeight ? 1.8 : 1.65; // 臨界判斷值  
		    
   // window.screen.height為螢幕高度
  //  window.screen.availHeight 為瀏覽器
 
 可用高度
  
		if (rate > limit) {
		result = true;
		}
		return result;
	};
   
	//自動執行匿名函式
(function() {
	$().ready(function() {
        judgeBigScreen();//判斷手機是否為全面屏
	});
})();

在需要使用的頁面使用

<script src="../js/mCommon.js"></script><!--公用JS-->
<script>
	function responsive() {
		if(judgeBigScreen()) { //judgeBigScreen() 呼叫公共js裡封裝的函式
 
，這裡根據返回值 true 或false ,返回true的話 則為全面屏 。
			let url = '../images/full_screen/banner-參觀伊利.png'
			$('#register_img').attr('src', url)
		} else {
			let url2 = '../images/general/banner-參觀伊利.png'
			$('#register_img').attr('src', url2)
		}
	}
	//初始化載入呼叫
	responsive();

	//監聽螢幕變化呼叫
	window.addEventListener('resize', function() {
		console.log(222, judgeBigScreen())
		responsive();
	})
</script>
 

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

那麼在小程式裡怎麼封裝？ 其實差不多

/**判斷螢幕大小 */
  judgeBigScreen() {
    let result = false;
    const res = wx.getSystemInfoSync();
    const rate = res.windowHeight / res.windowWidth;
    let limit = res.windowHeight == res.screenHeight ? 1.8 : 1.65; // 臨界判斷值
    if (rate > limit) {
      result = true;
    }
    return result;
  }