现在主流的全面屏已经占用很多的市场，那么通常开发会遇到些问题，比如要去根据普通屏或是全面屏做一些相应的展示，接下来我这边的需求是展示不同大小的图片 

首先在公共的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>

那么在小程序里怎么封装？ 其实差不多  

/**判断屏幕大小 */
  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;
  }

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/6477