问答详情
源自：3-2 电子书解析和渲染

老师,我渲染后,在手机上那本书并不能在屏幕中间或者充满屏幕,而是一直在右上角,怎么解决啊

https://img4.mukewang.com/5c988e7800011be805960872.jpg

<!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个观点.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;
}


提问者：qq_慕数据4544929 2019-03-25 16:18

个回答

  • 我骑单车别卡车
    2019-04-15 15:38:25

    不知道哇

    0