现在主流的全面屏已经占用很多的市场,那么通常开发会遇到些问题,比如要去根据普通屏或是全面屏做一些相应的展示,接下来我这边的需求是展示不同大小的图片
首先在公共的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;
}
经常就为了找一些分辨率高的壁纸而费尽心思,目前的手机端的壁纸分辨率也是参差不齐,质量高的数量少,数量多的质量差,今天就分享几个我感觉不错的壁纸(摄影)网站吧,可以勾选分辨率选择壁纸。
在H5页面,多次点击img标签时,会弹出当前的图片(效果类似查看),再点击,恢复部分手机点击图片会出现只看该图的功能,这个是手机自己浏览器自带的功能,这个时候只要将图片的冒泡冒泡阻止掉就可以了。
最新ipad pro版本是MAC系统,无法通过浏览器信息来区分ipad pro与MAC,详细浏览器信息,目前大家区分ipad pro与MAC的方法是,判断设备是否支持触摸
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!