加载 epub3 内容时 webView 忽略 CSS

Question

我正在研究一个 reader，我们曾经在 epub2 上工作，我使用 CSS 文件研究分页效果。我最近收到了一个 ePub 3 文件，它不遵守我提供的 CSS 规则，尽管在 Play Books android 应用程序上试用时它可以正常工作。

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

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

这是前面提到的在 epub2 文件上完美运行的分页 CSS

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 中使用了这个变量 widthplaceholderpx。通常应该在 Java 代码中覆盖它。但是当 bodyplaceholder 被添加到 HTML 的主体时，我需要再次覆盖 widthplaceholderpx 。所以 css 会知道实际高度是多少。

加载 epub3 内容时 webView 忽略 CSS

webView ignoring CSS when loading epub3 content

css

paging

android

webview

epub3