Question

Hy，

我正在读一个读者，我们曾经在epub2上工作，而且我正在使用.css文件处理分页效果。我最近收到了一个ePub 3文件，它不遵守我提供的css规则，虽然它在Play Books Android应用程序上试用时可以正常工作。

请注意，我已经操作了几个与网页视图相关的功能，例如：

testWV.getSettings().setUseWideViewPort(true);
testWV.getSettings().setLoadWithOverviewMode(true);

这是使用的分页css，如前所述，它可以完美地用于epub2文件

html {
     height:heightplaceholderpx;  //set dynamically depending on phone screen size 

     width:100%;
   }

body {
     margin:0px;
     padding:0px;
     width:100%;

     pointer-events: none;
  }


#viewer {
     width:widthplaceholderpx;
     height:heightplaceholderpx; 
 }

#book {
    width:widthplaceholderpx;
    height:heightplaceholderpx;

    margin-left:50px;
    margin-right:50px;
    margin-top:10px;

    -webkit-column-count:auto;
    -webkit-column-width:widthplaceholderpx;
    -webkit-column-gap:100px;
    text-align:justify;
}

.h {
    margin-top:60px;
    margin-left:100px; 
    margin-right:100px;
 }


img {
    max-width: 100%;
    height:auto;
 }

请注意，这就是我整合css文件的方式：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <link rel="stylesheet" href="columnPaging.css" type="text/css" media="screen"/>
    headplaceholder  //the header extracted from the xhtml file of the book
</head>
<body>
    <div id="viewer">
    <div id="book">
        bodyplaceholder   //the body extracted from the xhtml file of the book
    </div>
    </div>
</body>
</html>

Answer 1

就像你可以看到你在他的CSS中使用这个var widthplaceholderpx。通常应该在Java代码中覆盖它。但是当bodyplaceholder添加到HTML中的正文时，我需要再次覆盖widthplaceholderpx。所以css会知道实际的高度是多少。

webView在加载epub3内容时忽略css

1 个答案: