关于移动端响应式全屏背景图显示的问题

十一国庆期间，公司要做一个活动，设计部交过来一张图，只有一个按钮需要我敲，其他部分只有一张图，如下

完整设计稿

切图如下：

设计稿宽是1875px

以下为html代码：

 

<div class="box" style="background-image: url(@assetURL/img/iPhone-7.png)">
    <button onclick="clickBtn();">去APP Store下载</button>
</div>

以下为css代码：

 

 

.box{
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
    width: 100%;
    height: 100%;
    position: relative;
}
button{
    width: 13.4rem;
    padding: 0.6rem 0;
    background : #cf002d;
    border: none;
    border-radius: 13px;
    position: absolute;
    left: 50%;
    margin-left: -6.7rem;
    top: 50%;
    margin-top: 7rem;
    color: #fff;
    font-size: 1rem;
}

以下为js代码：

 

 

//判断宽高,实际内容被剪切返回false
//w1,h1:原图宽高
//w2,h2:需要展示内容区的设备的宽高
//conW,conH:内容区在原图的宽高
function judgeSize(w1,h1,w2,h2,conW,conH) {
    var radio1 = w1/h1;
    var radio2 = w2/h2;
    var realW,realH;
    var radio;
    if(radio1 < radio2) {//水平铺满，垂直方向被剪切
        radio = w1/w2;
        realH = conH/radio;
        if(realH < h2) {//垂直方向被剪切不影响展示效果时，返回hT
            return 'hT';
        }else {//垂直方向被剪切影响展示效果时，返回hF
            return 'hF';
        };
    }else if (radio1 > radio2) {//垂直方向铺满，水平方向被剪切
        radio = h1/h2;
        realW = conW/radio;
        if(realW < w2) {//水平方向被剪切不影响展示效果时，返回wT
            return 'wT';
        }else {//水平方向被剪切影响展示效果时，返回wF
            return 'wF';
        }
    }else {//等比例缩放时，返回w&hT
        radio = 1;
        return 'w&hT'
    }
}
//页面初始化时判断是否需要滚动条
function judgeScroll() {
    var winW = document.documentElement.clientWidth;
    var winH = document.documentElement.clientHeight;
    document.documentElement.style.fontSize = winW / 1875 * 100 + "px";//做rem单位适配
    var size = parseInt(document.documentElement.style.fontSize);
    //当页面根元素的fontsize小于12时不再做适配
    if(size < 12){
        $('body').css({'width':'18.75rem','height':'30rem','minHeight':winH,'minWidth':winW});
        return
    };
    var str = judgeSize(1875,3014,winW,winH,1440,2170);
    if(str == 'hF') {
        //内容区垂直方向被遮挡时，body的高等于设计稿的高，宽等于设备宽
        $('body').css({'width':winW,'height':'30rem'});
    }else if(str == 'hT' || str =='wT' || str == 'w&hT') {
        //内容区水平方向或垂直方向或两个方向同时都没有被遮挡时，body的宽或高或宽高分别等于设备的宽高
        $('body').css({'width':winW,'height':winH});
    }else if (str == 'wF') {
        //内容区的水平方向被遮挡时，body的宽等于设计稿的宽，高等于设备高
        $('body').css({'width':'18.75rem','height':winH});
    };
}

直接调用：

judgeScroll();

效果图：

 

iphone6 (375/667):

ipad (768/1024):

在设备很小时，显示滚动条（200/300）: