                        課程
                    
                        /前端開發(fā)
                        
                            /Vue.js
                        
                        /快速入門Web閱讀器開發(fā)

老師,我渲染后,在手機(jī)上那本書并不能在屏幕中間或者充滿屏幕,而是一直在右上角,怎么解決啊

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<!--<link?rel="stylesheet"?type="text/css"?href="css/global.css"/>-->
????<link?rel="stylesheet"?type="text/css"?href="css/reader.css"/>
????<!--<link?rel="stylesheet"?type="text/css"?href="css/reset.css"/>-->
</head>
<body>
<div?class="ebook"?id="app"?style="width:?100%;height:?100%;">
????<div?class="title-wrapper"?style="display:?none;">
????????<div?class="left">
????????????<span?class="icon-back"?style="color:#333;?font-size:?0.5rem;">Q</span>
????????</div>
????????<div?class="right">
????????????<div?class="icon-wrapper">
????????????????<span?class="icon-cart"?style="color:#333;?font-size:?0.5rem;">W</span>
????????????</div>
????????????<div?class="icon-wrapper">
????????????????<span?class="icon-person"?style="color:#333;?font-size:?0.5rem;">E</span>
????????????</div>
????????????<div?class="icon-wrapper">
????????????????<span?class="icon-more"?style="color:#333;?font-size:?0.5rem;">R</span>
????????????</div>
????????</div>
????</div>
????<div?class="read-wrapper">
????????<div?id="reader"></div>
????????<div?class="mask">
????????????<div??id="prev"?class="left">上</div>
????????????<div??id="toggle"?class="center"></div>
????????????<div?id="next"?class="right">下</div>
????????</div>
????</div>
????<div>
????????<div?class="menu-wrapper"?style="display:?none;">
????????????<div?class="icon-wrapper">
????????????????<span?class="icon-menu"?style="color:#333;?font-size:?0.5rem;">O</span>
????????????</div>
????????????<div?class="icon-wrapper">
????????????????<span?class="icon-progress"?style="color:#333;?font-size:?0.5rem;">P</span>
????????????</div>
????????????<div?class="icon-wrapper">
????????????????<span?class="icon-bright"?style="color:#333;?font-size:?0.5rem;">L</span>
????????????</div>
????????????<div?class="icon-wrapper">
????????????????<span?class="icon-a"?id="fonta"?style="color:#333;?font-size:?0.5rem;">A</span>
????????????</div>
????????</div>
????????<div?class="setting-wrapper"?id="font"?style="display:?none;">
????????????<div?class="setting-font-size">
????????????????<div?class="preview"?:style="{fontSize:?fontSizeList[0].fontSize?+?'px'}">A</div>
????????????????<div?class="select">
????????????????????<div?class="select-wrapper"?v-for="(item,?index)?in?fontSizeList"?:key="index">
????????????????????????<div?class="line"></div>
????????????????????????<div?class="point-wrapper">
????????????????????????????<div?class="point"></div>
????????????????????????</div>
????????????????????????<div?class="line"></div>
????????????????????</div>
????????????????</div>
????????????????<div?class="preview"?:style="{fontSize:?fontSizeList[fontSizeList.length?-?1].fontSize?+?'px'}">A</div>
????????????</div>
????????</div>
????</div>
</div>
<script?src="../../js/epub.min.js"></script>
<!--<script?src="../../js/jszip.js"></script>-->
<script?src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script?src="../../js/vue.js"></script>
<script?src="js/jquery.min.js"></script>
<script>


</script>
<script>
????var?vm?=?new?Vue({
????????el:?'#app',
????????data:?{
????????????fontSizeList:?[
????????????????{fontSize:?12},
????????????????{fontSize:?14},
????????????????{fontSize:?16},
????????????????{fontSize:?18},
????????????????{fontSize:?20},
????????????????{fontSize:?22},
????????????????{fontSize:?24}
????????????]
????????}
????});

????//?Load?the?opf
????var?book?=?ePub("10個(gè)觀點(diǎn).epub");
????console.log(book);
????//?console.log(currentSectionIndex);
????var?rendition?=?book.renderTo("reader",?{
????????width:?window.innerWidth,
????????height:?window.innerHeight
????????//?spread:?"always"
????});
????rendition.display();
????//?rendition.hooks.render.register(view?=>?{
????//?????const?contents?=?rendition.manager.getContents()[0]
????//?????contents.addStylesheet('test.css')
????//?})

????book.ready.then(()?=>?{
????????$("#toggle").click(function(){
????????????$(".title-wrapper").slideToggle(200);
????????????$(".menu-wrapper").slideToggle(200,?function?()?{
????????????????if($(".menu-wrapper").css("box-shadow")?===?"none"){
????????????????????$(".menu-wrapper").css({"box-shadow":"0?-0.15rem?0.15rem?rgba(0,0,0,0.15)"});
????????????????}
????????????});
????????????$("#font").hide(200);
????????????//?animate({height:?'1.5rem',?opacity:?'hide'},?'normal',function(){?$('#font').hide(2000);});
????????});
????????$("#fonta").click(function(){
????????????//?$(".menu-wrapper").css({"box-shadow":"none"});
????????????$(".menu-wrapper").css("box-shadow")?===?"none"???$(".menu-wrapper").css({"box-shadow":"0?-0.15rem?0.15rem?rgba(0,0,0,0.15)"})?:?$(".menu-wrapper").css({"box-shadow":"none"});
????????????$("#font").slideToggle(250);
????????});

????????var?next?=?document.getElementById("next");
????????next.addEventListener("click",?function(e){
????????????book.package.metadata.direction?===?"rtl"???rendition.prev()?:?rendition.next();
????????????e.preventDefault();
????????},?false);

????????var?prev?=?document.getElementById("prev");
????????prev.addEventListener("click",?function(e){
????????????book.package.metadata.direction?===?"rtl"???rendition.next()?:?rendition.prev();
????????????e.preventDefault();
????????},?false);

????????var?keyListener?=?function(e){

????????????//?Left?Key
????????????if?((e.keyCode?||?e.which)?==?37)?{
????????????????book.package.metadata.direction?===?"rtl"???rendition.next()?:?rendition.prev();
????????????}

????????????//?Right?Key
????????????if?((e.keyCode?||?e.which)?==?39)?{
????????????????book.package.metadata.direction?===?"rtl"???rendition.prev()?:?rendition.next();
????????????}

????????};

????????rendition.on("keyup",?keyListener);
????????document.addEventListener("keyup",?keyListener,?false);

????})

????document.addEventListener('DOMContentLoaded',()?=>?{
????????const?html?=?document.querySelector('html');
????????let?fontSize?=?window.innerWidth?/?10;
????????fontSize?=?fontSize?>?50???50?:?fontSize;
????????html.style.fontSize?=?fontSize?+?'px';
????})
</script>
</body>
</html>

.ebook{
????position:?relative;
}
.read-wrapper?{

}
.read-wrapper>.mask{
????position:?absolute;
????top:?0;
????left:?0;
????z-index:?100;
????width:?100%;
????height:?100%;
????display:?flex;
}
.mask>.left{
????flex:?0?0?3rem;
????display:?flex;
????justify-content:?center;
????align-items:?center;
????/*background-color:?yellow;*/
}
.mask>.center{
????flex:?1;
????/*background-color:?red;*/
}
.mask>.right{
????flex:?0?0?3rem;
????display:?flex;
????justify-content:?center;
????align-items:?center;
}
.title-wrapper{
????position:?absolute;
????top:?0;
????left:?0;
????z-index:?101;
????display:?flex;
????width:?100%;
????height:?1.1rem;
????background-color:?white;
????box-shadow:?0?0.15rem?0.15rem?rgba(0,0,0,0.15);
}
.title-wrapper>.left{
????flex:?0?0?1.8rem;
????display:?flex;
????justify-content:?center;
????align-items:?center;
}
.title-wrapper>.right{
????flex:?1;
????display:?flex;
????justify-content:?flex-end;
}
.title-wrapper>.right>.icon-wrapper{
????flex:?0?0?1rem;
????display:?flex;
????justify-content:?center;
????align-items:?center;
}
.menu-wrapper{
????position:?absolute;
????bottom:?0;
????left:?0;
????z-index:?101;
????display:?flex;
????width:?100%;
????height:?1.1rem;
????background-color:?white;
????box-shadow:?0?-0.15rem?0.15rem?rgba(0,0,0,0.15);
}
.menu-wrapper>.icon-wrapper{
????flex:?1;
????display:?flex;
????justify-content:?center;
????align-items:?center;
}
.setting-wrapper{
????position:?absolute;
????bottom:?1.1rem;
????left:?0;
????width:?100%;
????height:?1.5rem;
????background-color:?white;
????box-shadow:?0?-0.15rem?0.15rem?rgba(0,0,0,0.15);
}
.setting-wrapper>.setting-font-size{
????display:?flex;
????height:?100%;
}
.setting-wrapper>.setting-font-size>.preview{
????flex:?0?0?1rem;
????display:?flex;
????justify-content:?center;
????align-items:?center;
}
.setting-wrapper>.setting-font-size>.select-wrapper{
????flex:?1;
????display:?flex;
????align-items:?center;
}
.setting-wrapper>.setting-font-size>.select-wrapper>:first-child{
????flex:?1;
????display:?flex;
????align-items:?center;
}
.select{
????display:?flex;
????flex:?1;
????height:?100%;
????width:?100%;
}
.select-wrapper:first-child{
????background-color:?red;
}
.setting-wrapper>.setting-font-size>.select-wrapper>.line{
????flex:?1;
????height:?0;
????border-top:?1px?solid?#ccc;
}
.setting-wrapper>.setting-font-size>.select-wrapper>.point-wrapper{
????flex:?0?0?0;
????width:?0;
????height:?7px;
????border-left:?1px?solid?#ccc;
}