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