HTML5 移动Web App阅读器-4(页面基本结构开发)

来源：互联网发布：炒股神经病知乎编辑：程序博客网时间：2024/06/06 00:40

任务：
上下边栏：绝对定位或者fixed.相对独立，所以可以放到一个相对独立过程中去。
然后就是内容区：标题，内容，操作条。
引用normailze.css，zepto.min.js，jquery.base64.js，jquery.jsonp.js
Zepto是为现代智能手机浏览器推出的Javascript 框架, 有和jQuery相似的语法，不过更小

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">

width – // viewport 的宽度（范围从 200 到 10,000，默认为 980 像素）
height – // viewport 的高度（范围从 223 到 10,000 ）
initial-scale – // 初始的缩放比例（范围从 > 0 到 10）
minimum-scale – // 允许用户缩放到的最小比例
maximum-scale – // 允许用户缩放到的最大比例
user-scalable – // 用户是否可以手动缩放 (no，yes)

<meta name="format-detection" content="telephone=no">格式识别

忽略页面中的数字识别为电话号码
- 使设备浏览网页时对数字不启用电话功能（不同设备解释不同，iTouch 点击数字为存入联系人，iPhone 为拨打电话），忽略将页面中的数字识别为电话号码。
- 若需要启用电话功能将 telephone=yes 即可，若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。
- 结构和样式都是从大局观开始，然后再抠细节
- 如果想要好看，还是需要靠自己一点一点的量（位置，颜色）

<!DOCTYPE html><html ng-app="app">    <head>        <meta charset="utf-8">        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">        <meta name="format-detection" content="telephone=no">        <meta name="author" contect="hanxiao, 15132445252@163.com" />        <link rel="stylesheet" href="css/normailze.css">        <link rel="stylesheet" href="css/base.css">    </head>    <body>        <div id="root" class="container">            <div id="fiction_chapter_title"></div>            <div id="fiction_contaniner" class="m-read-content">                <h4>Lorem ipsum dolor sit amet</h4>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga earum cumque totam voluptas quia, ipsa repellat. Libero eaque, vitae accusantium, fugit autem natus voluptatem qui, enim, nulla animi ea.</p>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga earum cumque totam voluptas quia, ipsa repellat. Libero eaque, vitae accusantium, fugit autem natus voluptatem qui, enim, nulla animi ea.</p>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga earum cumque totam voluptas quia, ipsa repellat. Libero eaque, vitae accusantium, fugit autem natus voluptatem qui, enim, nulla animi ea.</p>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga earum cumque totam voluptas quia, ipsa repellat. Libero eaque, vitae accusantium, fugit autem natus voluptatem qui, enim, nulla animi ea.</p>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga earum cumque totam voluptas quia, ipsa repellat. Libero eaque, vitae accusantium, fugit autem natus voluptatem qui, enim, nulla animi ea.</p>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga earum cumque totam voluptas quia, ipsa repellat. Libero eaque, vitae accusantium, fugit autem natus voluptatem qui, enim, nulla animi ea.</p>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga earum cumque totam voluptas quia, ipsa repellat. Libero eaque, vitae accusantium, fugit autem natus voluptatem qui, enim, nulla animi ea.</p>                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga earum cumque totam voluptas quia, ipsa repellat. Libero eaque, vitae accusantium, fugit autem natus voluptatem qui, enim, nulla animi ea.</p>            </div>            <div class="m-button-bar"></div>            <ul class="u-tab">                <li id="prev_button">上一章</li>                <li id="next_button">下一章</li>            </ul>        </div>

css
文字排版，间距；按钮样式；容器（背景）

css的逻辑通常是从1开始的。
CSS中”overflow:scroll”默认是左右，上下都滚动；如果左右没有超出内容时，用overflow:auto;
如果左右有超出内容，用overflow-x: hidden;
先设置图片路径，再设置大小才会生效background-size:contain; 自适应
主题结构

html{    width: 100%;    height: 100%;    overflow-x:hidden;}body{    text-align: left;    width: 100%;    overflow: hidden;    background-color: #e9dfc7;    margin:0;}.m-read-content{    font-size: 14px;    color:#555;    line-height: 31px;    padding: 15px;    margin:0 0 1em 0;}.m-read-content h4{    margin:0;     font-size: 20px;    color:#736357;    border-bottom:1px solid #736357;    letter-spacing: 2px;}.m-read-content p{    text-indent:2em;    margin:0.5em 0;    line-height: 24px;}.m-button-bar{    width:70%;    max-width: 800px;    padding: 5px;    margin: 0 auto;}.u-tab{    height:34px;    margin-top: 0;    margin-bottom: 20px;    line-height: 34px;    border-radius: 8px;    border:1px solid #858382;    font-size: 12px;    background: #000;    opacity:0.9;    padding: 0;}.u-tab li{    display: inline-block;    width:49%;    text-align: center;    color:#fff;}.u-tab li:nth-child(1){    border-right: 1px solid #858382;}

具体css就不说了。
交互操作
- 返回操作
- 设置字号和背景，同时记忆设置好的内容
- 翻页操作，从服务器获得数据
先声明一个闭包，在里面定义事情不会影响到全局的一些事情。
第一步交互：事件绑定，数据存储，通用方法封装

localStorage是key:value的形式，所以key很容易有重叠，覆盖掉，所以我们可以在key前面加一个前缀。

window.jQuery = $;// 封装localStorage存储(function(){    var Util = (function(){        var prefix = 'html5_reader_';        var StorageGetter = function(key){            return localStorage.getItem(prefix + key);        }        var StorageSetter = function(key,val){            return localStorage.setItem(prefix + key,val);        }        return {            StorageGetter:StorageGetter,            StorageSetter:StorageSetter        }    })();    function main(){        //todo 整个项目的入口函数    }    // 数据层    function ReaderModel(){        //todo 实现和阅读器相关的数据交互方法    }    //初始化    function ReaderBaseFrame(){        //todo 渲染基本的UI结构    }    function EventHanlder(){        //todo 交互的事件绑定    }    main();})();

测试在调用时测试；
问题：为什么我们用click事件，不用touch或者zepto tap事件？
答：在安卓4.0之前，用click事件会有300毫秒的延时；不过这也太老了吧。而且在pc端click事件是支持的，但是tap是不支持的，需要打开模拟器哦。判断是移动端还是pc端，就稍微比较麻烦了。
class命名规则，带-的用来操作css，带_的用来操作js;也可以加前缀，还是看个人喜好。
注意性能，性能差都是一步一步累计出来的，而且是指数增长

0 0