kindle打开浏览器,输入 k.timor.tech 就可以。详细的请看官方文档:timor.tech/project/clo…
只要有浏览器的设备都支持,目前针对kindle等墨水屏、iPhone4S等小屏手机、主流大屏手机横屏竖屏、电脑等超大屏设备,都做了专门的适配,也就是说,目前的设备99%都可以适配。
在Chrome上开发的,好不容易开发好后,放到kindle上一看,直接白屏,傻眼了,kindle还没法调试。初步估计是react或者webpack打包有不支持的特性。拿h5test网站对比了一下,好像也没用到不支持的特性。正好手头上有个iPhone4S,还是iOS7的系统,打开也是白屏,估计和kindle环境差不多,打开Safari调试了一下,一个一个错误解决,最后加入了polyfill和es5代码编译解决。
但是目前还无法跑在IE6789上,主要是webpack打包的问题,后面再研究。顺便把脚手架共享出来,方便大家直接上手开发应用。
目前支持的功能:
1. kindle等刷新率慢的墨水屏适配
程序默认是每秒刷新一次屏幕,时间格式是时分秒,对于kindle等墨水屏设备,每秒刷新一次屏幕还是太快了,会增加耗电量,此时可以设置为每分钟刷新一次屏幕。
设置方法为:在 URL 中加入查询参数 t=HH:mm,注意是英文冒号。
t 表示时间的格式,支持完整的 YYYY-MM-DD HH:mm:ss,分别表示年月日时分秒替换,其余字符原样展示。
这种方法是通过设置时间格式为分来达到的,有同学想时间格式还是时分秒,只是刷新变成每分钟一次。这个功能后续升级实现,如果秒不变,看起来像卡住了一样,所以就没做。
适配 kindle 链接: k.timor.tech?t=HH:mm
2. 屏幕缩放
程序会自动检测屏幕大小,并以最佳效果缩放至全屏。此选项也可以用户手动设置。
设置方法为:在 URL 中加入查询参数 ts=1
ts 表示缩放比例,它的值需要大于0,等于1表示不缩放,以 1366 * 768 屏幕为参考基准。
3. 旋转屏幕
默认的画布方向是垂直方向,有些设备需要用横屏观看比较好,此选项可以让你手动设置画布的方向。
设置方法为:在 URL 中加入查询参数 dt=3
dt 表示旋转的方向,默认为0,即设备的默认方向,1 表示旋转90度,2 表示旋转180度,3 表示旋转270度,分别表示4个方向,顺时针旋转。
4. 时间位置
默认的时间位置是:左右居中,上下居中,在kindle中是左右居中,高度70%。此选项可以用户手动设置。
设置方法为:在 URL 中加入查询参数 th=70vh
th 支持的单位有:vh 表示屏幕高度参考,100vh 等于屏幕高度。vw 表示屏幕宽度,100vw 等于屏幕宽度。
此外,它的值还可以是 center,表示自动计算(会加入ts缩放因素)使它上下居中。
5. 其它配置
本程序所有元素都是可配置的,包括程序的各种参数、图片素材、时间字体等等,鉴于时间关系,没放出来,等我后面程序完善放出来。