加载epub3内容时webView忽略CSS答案

【问题标题】：webView ignoring CSS when loading epub3 content加载epub3内容时webView忽略CSS
【发布时间】：2017-09-18 12:12:32
【问题描述】：

我正在开发一个阅读器，我们曾经在 epub2 上工作，我正在使用 CSS 文件来处理分页效果。我最近收到了一个 ePub 3 文件，它不遵守我提供的 CSS 规则，尽管在 Play Books android 应用上尝试时它可以正常工作。

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

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>

【问题讨论】：

标签： android css webview paging epub3

【解决方案1】：

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

【讨论】：