面向smartphone的html开发经验技巧共享

1. 左右滑动翻页
左右滑动翻页是smartphone的一个鲜明特点。如果能够在HTML中也能实现左右滑动翻页的话，那就看上去很符合smartphone的风格了，能够给用户很好的体验。
目前还很难找到完美的解决方案，一般只能借助一些别人写的免费的javascript，结合自己根据实际情况进行调整和修改。
前段时间正好做过这类页面，我的解决方案是flipsnap + iscroll。
flipsnap能够解决左右滑动翻页的效果，但是缺点是，不支持各页面单独上下滚动。也就是说第一页滚动到什么位置，第二页也同时滚到了该位置。
iscroll能够支持区域内滚动。如果flipsnap中的每个页面都用iscroll实现，这样就可以比较完美的解决这个问题了。

flipsnap的资料请参考
http://pxgrid.github.com/js-flipsnap/

iscroll的资料请参考
http://cubiq.org/iscroll

都有简单的sample，很容易入手。

2. 根据javascript变量实现动态页面
JSP和ASP是众所周知的动态页面的实现技术。但如果页面是根据javascript的某个变量动态变化的，这个如何实现呢？
比如，某个<div>的高度是由javascript的一个变量决定的。
一般很自然的会想到在onload等函数中，用javascript设定div的高度。
document.getElementById("divId").style.height = varHeight;
但这样的缺点是画面刚载入的瞬间，div的高度还是按照默认的高度，页面载入完成之后，才变成设定的高度。
最好是画面刚载入的时候，就是设定的高度。
在写div的地方，用 document.write 函数替换就可以实现了。
<script>document.write("<div height=" + varHeight + ">");</script>
当然，这样实现代价是降低了代码的可读性，给维护带来不利影响，不是迫不得已，还是尽量不要用这种方法。

3. 减少每次访问的流量
JSP或ASP实现的页面，每次访问的时候，页面本身的代码会被重新执行，生成HTML代码返回给浏览器。如果页面中有参照的图片，css，js文件等，这些只在第一次访问的时候下载，接下来访问的时候就不下载了，直接利用本地的缓存。
根据上面的原则，如果想减少HTML画面的大小，可以把javascript或style定义，放到另一个文件中，在页面上只要参照进来就可以了。
如果还是觉得页面太大，影响访问速度，还有个极品的方法，就是把HTML中所有的缩进用的空格和制表符，以及换行符都删掉，这样应该可以很大程度的减少页面的大小了。
以上方法都是双刃剑，减少流量的同时，也降低了代码的可读性。需要视情况而定。