秀米H5通常会使用一次滚动一个屏幕的营销页面, 但是这样的页面是怎样适配不同尺寸的手机的呢?

由于工作中需要做类似的营销页面, 而设计师只给了375*667分辨率下的设计图, 如何化腐朽为神奇, 把僵硬的设计设配到iphone XS MAX 这种超高分辨率手机上面呢？

作为一个没有任何苹果设备的前端，真的很难给苹果设备做适配，总所周知微信在ios上的内置浏览器和安卓的实现不太一样，会产生各种离奇bug，再加上新的苹果手机普遍分辨率高，长宽比高，适配起来苦不堪言

chrome device mode 虽然可以模拟各种手机屏幕的比例，但却模拟不了微信在ios上的bug, 也模拟不了各种顶栏, 因此在高度上减少44px来模拟顶栏会比较接近用户使用时的屏幕尺寸

saferi的内核是webkit, chrome的内核是由webkit派生的blink, 因此微信浏览器的bug是微信的问题, 而不是苹果的问题

秀米是怎样做自适应的

秀米基本上都是通过在body上设置一个动态的style: fontSize, 页面元素使用em来规定大小和定位来做到自适应的, fontSize 变化范围在2-20px之间

• 上下留白, 当页面过长时, 在页面上下方产生留白 秀米的一个例子
• 上下留空, 空出来的与背景颜色一致, 没有白色留白那么大的违和感秀米中秋营销页面
• 页面中加框的设计, 四周留空, 相当于框住了一个固定比例的区域, 在手机中把这个区域居中即可
• 传统的滚动条, 抛弃了一个滚动一屏的华丽效果, 保留了花里胡哨的出现动画

秀米设计上的缺点

• 花里胡哨转场动画, 有些页面从空白到动画走完显示出所有内容要用5s, 转场的时间都够我读完一个页面的内容了, 严重阻碍阅读的效率
• 每个页面转场动画都一模一样, 就算做的再好看也会审美疲劳, 再加上超长的转场时间, 看两页就想退出了
• 默认开启的音乐, 毫无意义, 吵的一匹, 虽然我手机常年媒体静音, 但我看图文信息的时候绝对不需要有音乐

看秀米的页面就图一乐, 真要做一屏页面还是要用swiper

最后, 由于设计实在是太过僵硬, 存在大量贴边内容(无法居中留空两边), 为了照顾超长的手机, 就改成传统滚动页面了