加载EPUB3内容时,WebView忽略CSS



我正在研究读者,我们曾经从事epub2工作,我使用CSS文件从事分页效果。我最近收到了一个epub 3文件,它不遵守我提供的CSS规则,尽管在播放书籍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> 

就像您可以看到您在他的CSS中使用此var widthplaceholderpx一样。通常,它应该在Java代码中覆盖它。但是,当bodyplaceholder被添加到HTML的身体中时,我需要再次覆盖widthplaceholderpx。因此,CSS知道实际高度是多少。

相关内容

  • 没有找到相关文章

最新更新