default
menu home
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

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

styleTags: All CSS html javascript php/other IT
by: fanshome  2023-06-25 08:40(UTC)

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

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

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

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

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

iPhone_SE_375x667

iPhone_SE_375x667

Nexus_7_600x960

Nexus_7_600x960

Kindle_Fire_HDX_800x1280

Kindle_Fire_HDX_800x1280

iPad_Mini_1024x768

iPad_Mini_1024x768

Laptop_1440x900

Laptop_1440x900

1080p_1920x1080

1080p_1920x1080

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

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

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

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

不满意:赶紧到留言板写下您不满意之处,允许我进步。谢谢!

visibility 1302


- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel