今天下午杭州GDG举办了谷歌 Women Techmakers活动,不少杭州的程序媛前来参加,论技术、聊艺术、谈人生。其中天猫前端工程师@Doris_fhy分享了《跨终端页面展现 高清化的解决方案》(YouTube),非常精彩。这里是一篇听讲笔记,和大家共享一下。
为何要面向高清?
据Doris_fhy介绍,天猫移动端访问中,有八成以上的用户使用高清屏。PC端虽然目前只有1%不到用户使用高清屏,然而高清屏是未来的趋势。
如何面向高清?
图标字体
纯色图标可以使用图标字体。
无论屏幕是视网膜、高清屏、普通屏,图标字体的效果都一样细腻平滑。一套字体可以通吃所有设备。
阿里开发的矢量图标库提供了大量精美的矢量图标,值得各位前端开发者一看。
对于中文图标,可以将字体的编码设定到对应的中文,例如“天猫”图标就编码为“天猫”,这样图标没有加载的时候可以显示相应的汉字。
SVG
图表可以使用SVG。
SVG是矢量图形格式,缩放时质量不会有损失。缺点是制作起来成本较高。
高清图片
一些色彩比较复杂的图片,例如天猫的商品图片,不适合用SVG来做。只能为不同设备准备不同尺寸的图片。
使用CSS媒体查询( CSS media queries ),根据不同设备加载不同品质的图片:
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2){
/* 2倍分辨率 执行样式*/
}
<img>
标签加载的图片则用JavaScript替换,使用 window.devicePixelRatio
来判断是否为高清设备。
当然也可以在CDN层面解决。同一张图片,根据设备的不同,加载不同的版本。
加载速度
使用高清图片,可能会影响到加载速度。特别是对于图片很多的页面(比如商品图片众多的天猫首页)。因此,是否加载高清图片,除了判断是否为高清设备以外,还要考虑网速。
判断网速大致可以通过以下途径:
- 根据ip来源判断是3G还是WiFi
- 根据NetworkInformation.connection判断
- 如果是移动app中访问的话,可以调用平台相应的API来获取网络类型
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。