2015-03-02 145 views
0

我需要显示在gmail应用程序中显示的html内容,显示更具可读性的消息内容。实现LayoutAlgorithm.SINGLE_COLUMN算法?

我尝试的第一步是将自定义和通用的CSS应用于所有消息内容。但对于媒体查询并没有很好的反应,而且它在各种内容中都有所不同。此外,图像不是正确的比例。

所以我决定使用LayoutAlgorithm.SINGLE_COLUMN。除了多列表格外,它的工作原理与我对较低设备的预期完全相同。但对于设备> ktikat,它似乎已被弃用。

有没有其他方法可以实现LayoutAlgorithm.SINGLE_COLUMN算法?还是有任何替代品?任何帮助深表感谢。

回答

0

word-wrapping no longer supported

在Android中4.4(奇巧)起与铬的整合,文本回流从Web视图中移除。

有论坛在讨论这个问题,并且已经得到类似这个问题的答复已被宣布为“按照预期工作”,并且项目成员已经明确表示没有计划改变课程。

这是中提到:

“调用这个错误可能会有点不准确的 - 这似乎是谷歌意在去除文本重排也许搜索巨头真的是厌倦了等待的Web开发人员支持移动。设备,并决定采取更积极的态度,也许这只是谷歌推出改进后的智能算法的前身,毕竟,将内容压缩到一个窄列中的方法有点不切实际,并且倾向于拥有自己的无论这种情况如何,除了希望从网络开发这个更加伟大的世界中快速转变外,我们所能做的并不多。“

0

如您所知,SINGLE_COLUMN算法会将一些样式应用于给定的html页面,以将html内容放置在单个列中。因此,我们可以通过将CSS注入加载的html页面的<head/>部分来更改html页面的样式属性。包括的步骤有:

  1. 以编程方式下载html源文件并将其存储为String对象。
  2. 注入你的CSS样式到html页面。即,您必须准备一个将覆盖html页面上所有其他样式的CSS样式。

  3. 在您的java代码中,通过调用​​将CSS注入下载的html字符串,然后将返回的htmlString加载到webview。

    // bufferHtmlString有html源代码 webView.loadData(injectCssToHtmlCode(bufferHtmlString。toString()),“text/html”,“utf-8”);

  4. 方法​​,

\t private String injectCssToHtmlCode(String downloadedHtmlCode) { 
 
\t \t String head = "<head><meta name='viewport' "+ 
 
\t \t \t \t "content='initial-scale=1.0, "+ 
 
\t \t \t \t "maximum-scale=1.0, "+ 
 
\t \t \t \t "minimum-scale=1.0, "+ 
 
\t \t \t \t "height=device-height, "+ 
 
\t \t \t \t "width=device-width, "+ 
 
\t \t \t \t "target-densityDpi=device-dpi' /> "+ 
 
\t \t \t \t " \t \t <style type='text/css'> \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t " \t html.body {width:50% !important; height:auto !important; max-width:100% !important; } \t "+ 
 

 
" \t body {word-break:break-all !important; margin:0px !important; padding:2px !important; }"+ 
 
" \t h1 {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; }"+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t h2 {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; } \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t h3 {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; } \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t h4 {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; } \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t h5 {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; } \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t h6 {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; } \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t hr {max-width:100% !important; height:auto !important; margin-left:0px !important; margin-right:0px !important; padding:1px !important; border:none}"+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 

 
" \t p {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; width:100% !important; word-wrap: break-word !important;} "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t pre {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; white-space:pre-wrap !important; }"+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t form {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; width:100% !important; word-wrap: break-word !important;} \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 

 
" \t dl {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; width:100% !important; word-wrap: break-word !important;} \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t ul {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px 1em !important; width:100% !important; word-wrap: break-word !important;} \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t ol {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px 1.5em !important; width:100% !important; word-wrap: break-word !important;}"+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t dir {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; width:100% !important; word-wrap: break-word !important;} \t \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t div {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; background-color:#FF0055 !important; width:100% !important; word-wrap: break-word !important;} \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 

 
" \t marquee {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; } \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t table {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; word-wrap: break-word !important;}"+ \t 
 
" \t table input[type='text'] {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; width:100% !important; word-wrap: break-word !important;}"+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t table input[type='file'] {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; width:100% !important; word-wrap: break-word !important;}"+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t table textarea {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; width:100% !important; word-wrap: break-word !important;} \t "+ 
 

 
" \t tr {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; word-wrap: break-word !important;} \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t td {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; word-wrap: break-word !important;} \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t input {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; word-wrap: break-word !important;} \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t textarea {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; word-wrap: break-word !important;}"+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t select {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; } \t \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t a {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; word-wrap: break-word !important;} \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t object {max-width:100% !important; height:auto !important; margin:1px 0px !important; padding:2px 0px !important; }"+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t img {max-width:100% !important; margin:1px 0px !important; padding:2px 0px !important; } \t \t \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t marquee[behavior='alternate'] {display:block !important; overflow:-webkit-marquee !important; max-width:100% !important; -webkit-marquee-style:alternate !important; } \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t .wb{word-break:break-all !important; } \t "+ 
 

 
" \t @-webkit-keyframes blink { \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t 0% { opacity: 0 } \t \t \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t 50% { opacity: 0 } \t \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t 50.01% { opacity: 1 } 100% { opacity: 1 }"+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t } \t \t \t \t \t \t \t \t \t \t \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t blink { \t \t \t \t \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t -webkit-animation: blink 0.7s infinite linear alternate !important; \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t -webkit-font-smoothing: antialiased !important; \t \t \t \t \t \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
" \t } \t \t \t \t \t "+ \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 

 
"</style></head>"; 
 
\t \t return "<html>" + head + "<body>" + downloadedHtmlCode + "</body></html>"; 
 
\t }

+0

抱歉PAL。这个CSS不适合所有类型的内容 – arul 2015-03-14 15:49:49