一个手机阅读器的WebApp

本文档介绍了一个手机阅读器的WebApp开发过程,涵盖了HTML页面、JS部分(包括jQuery与Zepto的异同、HTML5本地存储的使用)以及CSS部分。在JS部分,讨论了第三方库的选择,如Zepto.js,以及HTML5的本地存储和跨浏览器事件绑定。CSS部分涉及了base64编码图片的使用和优缺点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

按照惯例,咱也还是先上效果图。
有句名言说得好:没图说个脚本:)
iReader效果展示
还有一句名言叫做:talk is to easy, show me the code!
So 接下来咱们就开始看看这个小东西里面都有哪些重难点。

HTML页面部分

这部分还比较常规,没有特别需要注意或者说新颖的地方,有几个小tips看一下就好了。
* 因为作品是针对手机端的一个WebApp,所以为了让这个WebApp看起来更像是一个Native App,我们需要在页面部分的meta处声明以下代码,作用分别是:设备宽度等于视口宽度即使布局视口等于可视视口,这样布局视口就成为了理想视口;最小缩放1倍;最大缩放1倍;禁止用户缩放;

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

JS部分

一、第三方库的选择和使用
需要用到的第三方库有jQuery.base64.js、jQuery.jsonp.js,分别用来进行base64格式图片的获取以及jsonp的使用,此外在这里我是用了Zepto.js而不是jQuery作为前两个库的支持,这是因为在移动端的性能表现上,Zepto比jQuery稍微优秀一些,也正因如此在js文件引用时需要做那么一些小改动。

<script type="text/javascript" src="lib/zepto.min.js"></script>
<script type="text/javascript">
    window.jQuery = $;
</script>
<script type="text/javascript" src="js/jquery.base64.js"></script>
<script type="text/javascript" src="js/jquery.jsonp.js"></script>
<script type="text/javascript" src=
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值