現在主流的全面屏已經占用很多的市場，那么通常開發會遇到些問題，比如要去根據普通屏或是全面屏做一些相應的展示，接下來我這邊的需求是展示不同大小的圖片
首先在公共的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; }