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

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

完整设计稿

切图如下：

设计稿宽是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）: