移动端H5页面、微信H5页面、App开发屏幕适配参考_微信h5可以全屏吗

App开发和H5开发中经常会遇到图片资源屏幕适配的问题，其实只要跟UI沟通清楚了图片尺寸和设计要求，再结合一些适配性比较好的实现方案，这种问题一般都可以得到解决。

手机屏幕适配的时候通常拿iPhone 6S作为设计标准，6S的屏幕分辨率是750×1334，这就是很多H5满屏图的设计尺寸。

注意：以6S为例，浏览器中获取屏幕尺寸的window.innerWidth和window.innerHeight得到的是375×603，为啥？
因为这其中有一个2倍的关系，750×1334的屏幕分辨率，实际获取到的大小是：375×667，再减去状态栏和微信浏览器标题栏总共占据> 的64高度，就剩下603的高度。
其中，状态栏占据20的高度，微信浏览器标题栏占据44的高度，总计64。

iPhone 6S屏幕分辨率：750×1334
6S Plus屏幕分辨率： 1080×1920
iPhoneX屏幕分辨率：1125×2172

微信H5页面，因为标题栏的原因，全屏图片设计尺寸参考如下：

除去状态栏和标题栏，按照高宽比从大到小，排列几款机型：
iPhoneX：1125×2172 高宽比：1.93 模拟器尺寸:338×652
坚果pro2s:1080×1932 高宽比：1.79
iPhone 6s：750×1198 高宽比：1.59 模拟器尺寸:324×517

全屏背景实现方案:

设计的时候按宽高比1.75(目前主流大屏手机宽高比取一个中间值)进行，设计尺寸可取：800×1400，或者750×1314。

当手机高宽比大于1.75时（如IPhoneX），图片高度跟照屏幕高度一致，此时图片宽度会大于屏幕宽度，宽度多余的部分两边各裁剪掉一半；
当手机高宽比小于1.75时（如IPhone6s），图片宽度跟照屏幕宽度一致，此时图片高度会大于屏幕高度，高度多余的部分上下各裁减掉一半；

备注: 这样设计微信H5页面全屏背景图的时候, 主要元素不要放到上下左右四边5%边距的范围内, 因为这样在不同尺寸屏幕上可能会被裁减掉。

html,body {
    width: 100%;
    height: 100%;
}
body {
    background-image: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}
1
2
3
4
5
6
7
8
9
10
11

如果页面元素有相对于屏幕顶部百分比进行定位的需求,参考如下js:

var winRatio = window.innerHeight/window.innerWidth;
function getRatio() {
    var val = 0.084;//设计规格: margin-top:8.4%;
    if(winRatio<1.75) {
        return parseInt(window.innerHeight*(0.5+val)-window.innerWidth*0.875+0.5);
    } else {
        return parseInt(window.innerHeight*val);
    }
}
Q('proRuleBtn').style.top = getRatio() + 'px';
1
2
3
4
5
6
7
8
9
10