favinavi网络收藏夹Ver 2.0开发笔记之更精细适配各类屏幕

这两天把favinavi计划中的基本功能都做完了，虽然还不很完美，但是追求完美总是要有一个前提和基础，就是先搭好框架。

目前来看，favinavi的基本框架就是这样了。然后有点空，开始回头检视以前做的比较粗放的地方。favinavi的一贯风格是“满屏书签”，2.0版为了适应当今各种大小屏幕满天飞的时代，费了不少心思。从一开始固定一行6个书签，到区分手机和pc，pc显示6个，手机显示4个。然后就被用户教育了：“手机上每行4个书签根本没法看清楚具体内容！”。得，听人劝不吃亏，马上改：手机每行2个书签。然而，这样还是太粗放，大屏幕用户又不高兴了，我那么宽的屏幕，你就给我一行显示6个书签，太少了。

唉，众口难调，但是用户说的在理啊，必须听用户的。但开始的时候怕麻烦，因为一旦动了每行的书签个数，不止是调整显示格式的问题，拖拽编辑也得跟着改，原来的老代码是根据定死的每行6个书签写的，一时半会头绪太多，所以就暂时拖了一阵。

现在，新版程序作了不少调整，已经可以灵活根据屏幕大小来显示不同列数的书签了，后台处理程序也跟着弄灵活了。于是，今天干脆就把活儿做到极致，不同宽度的屏幕干脆全部做适配，每行从2列一直到10列，逐个增加，不留死角。不论您今天用啥终端，也不论您喜欢横屏还是竖屏，总之，favinavi一概自适应，把最合适的列数呈现出来。

下面就展示一下favinavi的demo用户的收藏夹，同一个页面，在不同终端屏幕上的效果：

iPhone_SE_375x667

Nexus_7_600x960

Kindle_Fire_HDX_800x1280

iPad_Mini_1024x768

Laptop_1440x900

1080p_1920x1080

可以看到，除了每行呈现的书签列数不同，还有很多细节（比如图标、菜单等），在不同屏幕上也是不一样的呈现方式。

就在为了做屏幕适配而努力的时候，顺带找到了一个已经存在月余的老bug。由于平时使用笔记本开发，屏幕不够大，最大宽度1920，平时又是放大了用，不然字太小，费眼睛，所以一直没有机会用台式机来试。昨天为了看屏幕适配效果，特意打开了尘封已久的台式机，结果就发现了用户曾经提到的bug，就是用鼠标拖拽编辑书签的时候书签有时不听话。当时在笔记本上没有机会重现bug，所以就没有深入研究。现在终于无心插柳，顺手就把bug修复了。在此隆重感谢提出问题的用户，抱歉让您久等了。

现在的2.0版favinavi，不知在屏幕适配方面大家是否满意呢？

满意：就请多多宣传favinavi.com，给您身边有需要的人。

不满意：赶紧到留言板写下您不满意之处，允许我进步。谢谢！