这篇论文没用H5写完，其余的方法都一样，主要是学习方法。
HTML代码：
<html> <head> <meta charset="UTF-8"> <title>基于 HTML5 的移动阅读内容展示方式</title> <link rel="stylesheet" href="style.css"> </head> <body> <article> <header> <h1>基于 HTML5 的移动阅读内容展示方式</h1> <address> <strong>李青,王晨升</strong> <span>北京邮电大学自动化学院,北京 100876</span> </address> <p class="abstrc"> 据“2014 中国数字阅读白皮书”的大数据显示,在 2014 年底,手机阅读用户接近 3 个亿,手机阅读明显已经成为手机网民在重拾碎片时间中的主要活动之一。目前的移动阅读平台由 Native App 主导, Native App 生命周期短、占据用户设备内存资源、上架审核流程复杂、版本更新慢的劣势日益显现。基于 HTML5 的移动阅读 Web App,采用自适应的网页布局方式,自动识别设备屏幕宽度,适配不同分辨率的设备填充文本内容,对内容资源进行版式与流式的排版展现。满足了用户打开移动设备浏览器就能进行阅读的需求,提升阅读体验。 </p> <p class="keyword">Web; Native App; Web App; 阅读</p> <p class="clcn">TP303.2</p> </header> <header lang="en"> <h1>The Content Display Method of Mobile Reading Based on HTML5</h1> <address> <strong>LI Qing, WANG Chensheng</strong> <span>Automation School,Beijing University of Posts and Telecommunications, Beijing 100876</span> </address> <p class="abstrc"> According to the "2014 China Digital Reading white paper", at the end of 2014, the mobile phone users to read nearly 3 hundred million, mobile phone reading has become one of the main activities of mobile users in the time of repicking up the debris. The current mobile reading platform is dominated by App Native, the App Native has a short life cycle, which has the disadvantages of occupying user's device memory resource, the complexity of the audit process and the slow version of the update. The Mobile reading Web App,which is based on HTML5, adapt of different resolutions of the device to fill the text content. It meets the needs of the user to open the mobile browser to read the mobile device to enhance the reading experience. </p> <p class="keyword"> Web; Native App; Web App; reading </p> </header> <section> <h2>引言</h2> <p>随着 Wifi、4G 等网络技术的不断发展,数据网络传输变得更加快捷与便利,带动了移动设备的智能化发展、智能移动设备应用的爆发性增长。在应用市场中,移动阅读相关应用市场占有量突出。目前的移动阅读平台由都 Native app 主导。而 Native App 应用的劣势也日益显现。对于开发者而言,Native App 应用需要针对各种手机操作系统开发多个版本,同时Android 版本碎片化问题给开发带来了更大的阻力。随着 W3C 对 HTML5 规范的制定 [1] , web app 使用的网页语言在大部分操作系统和浏览器中都兼容,有效节省了开发成本,跨平台性、版本迭代更新简单等巨大优势显现。基于 HTML5 的移动阅读应用使用户只需打开浏览器,便能随时随地看书 [2] 。</p> <p>Web App 开发的重要特性是一套代码适配所有手机设备。但是,移动端设备屏幕尺寸碎片化严重。对于 Android 主流的分辨率就有 480x800、480x854、 540x960、 720x1280、1080x1920。随着苹果公司推出 iPhone6 与 iPhone6 Plus,iPhone 系列分辨率有以下几种:640x960、640x1136、750x1334、1242x2208。Ethan Marcotte 在 2010 提出了“自适应网页设计”,即自动识别设备屏幕宽度、做出相应网页调整。</p> <p>数字阅读终端内容可分为纯图片与图文混排两种内容形式。内容展示过程中的滑屏效果需要表现的类似于纸质书籍阅读的效果,更贴近用户需求。本文主要针对版式排版的展示效果实现与流式排版展示效果实现加以说明。</p> </section> <section> <h2>用户触摸屏事件</h2> <section> <h3>Touch 事件处理机制</h3> <p>移动阅读要实现和纸质类书籍阅读类似的阅读体验,需要对用户触摸屏动作做出滑屏或者翻页的效果处理。处理过程即设备屏幕受到用户滑动屏幕后,页面试图区域随手指的移动而移动,手指抬起时根据移动方向判断用户进行上页或是下页的操作,自动移动切换到目标页面。</p> <p>用户点按触摸屏设备,会触发 Touch 事件 [3] 。Touch 事件包含了 Touchstart(手指触摸屏幕上的时候触发)、Touchmove(手指在屏幕上移动的时候触发)和 Touchend(手指从屏幕上拿起的时候触发)、Touchcancel(系统取消 touch 事件的时候触发)。在这一系列的Touch 事件触发过程中,伴随有页面的移动,移动效果的处理过程可使用 css3 中的 translate()方法实现。由于用户在触摸屏设备的屏幕上进行滑动或多点手势操作时往往会触发浏览器行为,例如滚动和缩放。为保证对用户触摸屏事件处理的可控性,需要在 html 文档的头部加上</p> <code> <pre> <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0user-scalable=no"/> </pre> </code> <p>禁止视图区域滚动和缩放。</p> </section> <section> <h3>Click 事件处理机制</h3> <p>点击事件的处理较容易处理。只需判断用户触摸屏事件位置,根据设定的阈值,判断用户想要实现的翻页效果,以切换页面前翻/后翻。本文将屏幕宽度的 1/3/、2/3 位置值作为阈值,当点击事件发生在 1/3 位置左侧区域时,页面切换进入下一页,中间未知区域不做变化,当点击事件发生在 2/3 位置右侧区域时,页面切换至前一页。</p> </section> </section> <section> <h2>页面切换效果实现方法的比对</h2> <section> <h3>Touch 事件与 translate( )方法实现</h3> <p>对应的 html 文档层级关系如下：</p> <code> <pre> <div class="wrap" id="viewBox" > //视图区域 <div id="readFld"> //内容填充区域 … … </div> </div> </pre> </code> <p>触摸屏检测到用户 touch 操作时，首先初始化数据，记录当前页面的触摸位置等信息，继续监听用户 Touchmove 操作，如果 Touchmove 未发生，恢复初始状态，页面不做处理。若发生了，则继续监听用户 Touchend 事件， Touchend 时间的触发表示用户操作结束，判断当前用户手势的相对位移，将该值与设定的阈值进行比较，超出阈值进行翻页处理，否则页面恢复到原始状态。 Touchmove 与 Touchend 事件的触发过程中均有页面视图的平移效果，具体实现依赖于 translate()方法与相对位移的大小。</p> <p>具体实现的流程图如图 1 所示：</p> <figure> <img src="fig1.png" alt=""> <figcaption>用户触摸屏事件翻页效果处理</figcaption> <figcaption lang="en">The processing of page-flipping because of the touches event</figcaption> </figure> <p>整个事件监听中，手指拖动屏幕的滑屏效果的处理关键要素即为手指滑动的相对位移。在 手指 初始 按压 屏幕时 即 Touchstart 事 件触发 时， 记录 初始 屏幕位 置， startX = event.touches[0]. pageX,startY = event.touches[0].pageY; 在拖动屏幕时触发 Touchmove 事件，会 产 生 新 的 位 置 值 ， 记 录 此 刻 屏 幕 位 置 ， nowX = event.touches[0].pageX,nowY = event.touches[0].pageY;首先应该根据水平与垂直位移的变化值判断用户行为，是左右翻页，还是想要上下滑动。 由于是针对翻页的处理，所以当用户表现出上下滑屏的倾向时，不作处理。对于左右滑动， 依据相对位移的正负值判定方向， 将相对位移大小值传入 translate 方法，展现滑屏效果。</p> </section> <section> <h3>借助 Swiper 插件实现</h3> <p>由于整个 touch 事件的处理基于用户行为的位移测算， 过程复杂，容易出错。 对于用户的快速滑屏行为处理较为棘手，会出现跳页等问题。 Swiper 插件的引入，简化了 touch 事件处理过程且效果较为理想。 Swiper 是一款轻量级的移动设备触控滑块 js 框架，主要使用于移动端的网站、移动 web apps， native apps 和 hybrid apps。在 IOS、 Android、 WP8 系统都有着良好的用户体验。 swiper 插件实际封装了 touch 事件对用户触屏事件的 translate 处理，实现了平滑、流畅的滑屏与切换功能，结合 Swiper 中回调函数的使用，可实现版式阅读的流畅翻页阅读效果。</p> <p>Swiper 可以处理多个滑块内容，其中添加与删除滑块是常用到的方法。 Swiper 对象的 prependSlide（）方法可以为新增滑块到滑块组的第一个位置， appendSlide（）方法将新增滑块到滑块组的最末位位置。对应的删除滑块方法为 removeSlide(index)方法， index 为目标滑块在滑块组的索引值。</p> <p>在使用 Swiper 进行阅读翻页效果处理时， 实现要进行初始化。初始化过程规定页面滑块组中滑块个数确定视图区域的滑块索引值。 为减少页面加载过程中用户等待的时长，提升加载效率，本文在初始化时为 Swiper 添加“左”“中”“右”三个 slide 页面，确定“中”为视图区域，为视图区域加载页面，页面 id=pageid。 “左”“右”分别加载 id=pageid-1， id=pageid+1 页面。 初始化如图 2 所示，其中着色区域为视图区域。</p> <figure> <img src="fig2.png" width="300px" alt=""> <figcaption>页面初始化处理</figcaption> <figcaption lang="en">The processing of Page initialization</figcaption> </figure> <p>其中对应的 html 层级关系如下图所示：</p> <code> <pre> <div class="swiper-container" id="swipeBox"> <div class="swiper-wrapper"> <div class="swiper-slide" id='pageId_"+(pageid-1)+"'><a>…</a></div> <div class="swiper-slide" id='pageId_"+(pageid)+"'><a>…</a></div> <div class="swiper-slide" id='pageId_"+(pageid+1)+"'><a>…</a></div> </div> </div> </pre> </code> <p>初始化设置 Swiper 的视图区域为第二个（中间位置）页面</p> <code> <pre> <script language="javascript"> var mySwiper = new Swiper('.swiper-container',{ initialSlide :1 }) </script> </pre> </code> <p>在整个的处理过程中，首页与末页一直是处理的特殊临界点，在页面进行左翻、右翻的情况下分别进行特殊处理。 视图区域进行翻页后的状态显示，即所要做的加载与删除操作处理过程如下，其中 a 着色区域为视图区域， b“←”为左滑， c“→”为右滑， d 用虚线框框起的页面表示加载该页面， e 用×覆盖表示将页面做删除处理。</p> <section> <h4>一般情况的处理（ 视图位置为第二页与倒数第二页之间的页面 pageid）</h4> <p>A滑动方向为←时， 处理过程如图 3 所示，达到翻页阈值时，为 Swiper 末位添加 slide，首位删除 slide，视图区域变更。</p> <p>B 滑动方向为→时， 处理过程如图 4 所示，达到翻页阈值时，为 Swiper 首位添加 slide，末位删除 slide，视图区域变更。</p> </section> </section> <section> <h3>图文混排内容资源的特殊处理</h3> <p>对于内容资源为 html 标签元素包含的文本与图片内容资源[5]考虑采用流式排版的处理方法。请求资源在前端的展示，需要首先在页面引入自定义样式 css 来限制图片大小在视图区域内，调整展示效果。对于文本字体大小，采用自适应页面规则，检测设备屏幕大小，根据不同屏幕分辨率设置不同大小[6]。 采用的方法即为媒体查询，与不同设备引入不同的 css样式的方法。 在使用 javascript 进行用户视图界面填充时，首先判断节点类型， 按节点来填充。 当填充内容不足或刚刚可以填满视图区域时，进行节点的顺次填放。 当检测到填充内容超出视图区域时， 对最后的节点进行分析，如果是图片类型的节点，就对图片进行下页填放。如果是段落节点，就将节点内容进行二分法拆分， 将内容按字节进行填充， 直到填满视图区域，多出内容下页填放。</p> </section> </section> <section> <h2>结论</h2> <p>本文给出了基于 HTML5 的移动阅读内容展示方式[7]。分析比较了采用原生的 javascript代码实现的翻页阅读效果与借助 Swiper 插件实现的翻页阅读展现效果。 Swiper 简化了用户触摸屏位移处理，利用基本的回调函数即可实现平滑过渡，效率高且不易出错。本文还对同时包含图片与文本的内容资源进行了流式排版处理，按节点在视图区域内填放内容，可达到适配各设备尺寸的自适应效果。</p> </section> <footer> <p> <strong>[参考文献](References)</strong> </p> <ol> <li>刘华星, 韩庚. HTML5--下一代 Web 开发标准研究[J]. 计算机技术与发展, 2011， 21（ 8）： 54-59.</li> <li>王兆, 胡锦. 从用户需求分析如何初步定义产品功能[J]. 艺术与设计(理论)， 2011： 203-205</li> <li>黄競. 基于 jQuery 框架的 Web 前端系统构建方法的研究与应用[D].北京：北京邮电大学, 2012.</li> <li>黄永慧,陈程凯.HTML5 在移动应用开发上的应用前景[J]. 计算机技术与发展,， 2013，（ 7）： 207-210</li> <li>朱聚豹. 移动 Web 前端性能与图片优化的研究[D]. 武汉：华中师范大学， 2013.</li> <li>戚琪. 移动平台网页自适应云转换机制研究[D].武汉：华中科技大学， 2013</li> <li>刘斌.HTML5-未来网络应用的核心技术研究[J].自动化与仪器仪表， 2010，（ 4）： 30-33</li> </ol> </footer> </article> </body> </html>
CSS代码：
body{
background-color: #333333;
/*重置计数*/
counter-reset: myh1;
}
article{
background-color: white;
width: 900px;
margin: 10 auto;
padding: 80px 120px;
box-sizing: border-box;
counter-reset: figure;
}
h1{
font-size: 35px;
text-align: center;
}
address{
text-align: center;
font-style: normal;
font-family: 经典楷体简;
}
address strong{
display: block;
font-weight: normal;
font-size: 20px;
line-height: 150%;
}
address span:before{
content: '(';
}
address span:after{
content: ')';
}
address span{
line-height: 150%;
}
.abstrc:before{
content: '摘要: ';
font-weight: bold;
line-height: 160%;
}
.abstrc{
margin: 0;
/*使文本两端对齐*/
text-align: justify;
}
.keyword,
.clcn{
margin: 0;
line-height: 160%;
}
.keyword:before{
content: '关键词: ';
font-weight: bold;
}
.clcn:before{
content: '中图分类号: ';
font-weight: bold;
}
/*英文部分*/
/*属性选择器*/
header[lang=en]{
margin-top: 40px;
}
header[lang=en] h1{
font-size: 24px;
}
header[lang=en] address{
font-family: Arial, Helvetica, sans-serif;
}
header[lang=en] strong{
font-size: 18px;
}
header[lang=en] span{
font-size: 15px;
}
header[lang=en] .abstrc:before{
content: 'Abstrc: ';
font-weight: bold;
}
header[lang=en] .keyword:before{
content: 'Key word: ';
font-weight: bold;
}
h2{
font-weight: normal;
margin-top: 40px;
counter-reset: myh3;
}
h2:before{
counter-increment: myh1;
content:counter(myh1)' ';
}
section p{
text-indent: 2em;
text-align: justify;
}
h3{
font-weight: normal;
}
h3:before{
counter-increment: myh3;
content: counter(myh1)'.'counter(myh3)' ';
}
figure{
text-align: center;
counter-increment: figure;
}
figcaption{
font-size: 15px;
line-height: 150%;
}
figcaption:before{
content: '图 'counter(figure)' ';
}
figcaption[lang="en"]:before{
content: 'Fig. 'counter(figure)' ';
}
h4{
text-indent: 2em;
font-weight: normal;
}
h4::before{
content: '(1) ';
}
ol{
margin: 0;
padding: 0;
counter-reset: li;
}
li{
font-size: 13px;
list-style: none;
}
li:before{
counter-increment: li;
content: '['counter(li)'] ';
}
