[演示数据] - Eric全新轻爽极简风格模版主题（v1.0不支持响应式）。 / 新闻资讯

【演示数据】

距离上次发布的“Avatar”主题已经过去了大概9个多月的时间。咳咳，是有点太过于那啥。

其实，我还是可以找到很多借口来搪塞的，比如：工作上比较忙、一直在专注小程序开发、朋友聚餐，对自己的新版本界面设计不满意等等。

不过呢，哈哈哈，还是有点太过于违心。

其实，这么久才更新新主题，主要还是拖延症。

老是想着，哎呀，时间还多着呢，等等再做吧；哎呀，这周有点忙，下周再开发吧。

于是，明日复明日，拖延到现在，2333。

确切的说，这个拖延症呀，嘿嘿。

不过，时隔大半年后，终于这次算是出了新版本模版主题，依旧是基于YzmCMS，这次是基于其v5.6版本进行开发的。所以如果是低于5.6版本以下的管理程序，使用该模版主题时，有可能会出现某些错误等，so，推荐使用YzmCMS v5.6版本。

然后，这次的模版主题，移除了响应式设计，也就是不再兼容移动端，浏览适配宽度也改为1200px，视野较“Avatar”主题更宽阔。

同时，再后续的更新中，为了方便移动端用户使用，同时也为了提升用户的交互体验。故而，将在后续发布小程序模版源码，目前进度正在开发中。

关于即将到来的小程序，和现在网站上的“遇见北岛”小程序比较雷同，不过，那将是一款完全基于YzmCMS系统而开发的小程序。

也就是说，小程序端的所有数据完全来源当前网站数据；且，支持小程序用户注册会员等。

最后，按照惯例，以下内容为“Eric”模版主题的展示效果、模版文件说明以及模版安装说明等。

昨天，我在 Google 搜索 iOS Safari 的键盘问题，已经不知道是第几次这样绝望地寻找了，直到我找到了这篇 Safari 13, Mobile Keyboards, And The VisualViewport API.。文章指出，Safari 13（iOS 13）已经支持了 VisualViewport API，这是一个可以反映实际可视区域的实验性标准。根据 MDN 页面，目前只有 IE 和 Legacy Edge 不支持这个 API。

经过测试，iOS 13 对于这个 API 支持非常完善，已经能够完全体现页面上不含键盘的可视区域所在的位置了。可是，明明只有 iOS 8.2 不会报告键盘弹出，为何却有一个跨平台的 API 来补偿呢？其他浏览器有 window.innerWidth、window.innerHeight 和 resize 事件不是就足够好了吗？

没错，问题在于页面缩放。可以看出，当页面发生放大后，fixed 元素是不会一起移动到实际可视区域的。而且经过测试发现，Android 下的 window.innerWidth、window.innerHeight 也不会随页面放大而一起变化。反而在 iOS 下，window.innerWidth、window.innerHeight 会随着页面放大而等比例减小，虽然不会去掉键盘高度，但确实反映了显示在屏幕内的页面区域尺寸。

而 VisualViewport API 在 Android 和 iOS 两端，都完整反映了在缩放和键盘弹出等一系列影响下，实际可视区域在页面中的位置和大小。

因此，VisualViewport API 对于 iOS 以外的平台，最大的意义是可以反映页面的放大区域；而对于 iOS Safari 浏览器，最大的意义是可以反映键盘的弹出。 基于这一点，我们可以实现一个真正相对于可视区域 fixed（固定）的 fixed 容器。

如何实现一个 fixed 容器？关于这一点，也许有一部分 Web 开发者并不知情。在 Web 开发者的直觉中，fixed 元素是始终相对于视口定位，没有任何一个元素能够改变它的定位方式；但事实上，问题却有些不同。

如果你曾经使用过一些性能优良的滚动容器，如 iScroll、BetterScroll、AlloyTouch 等，你可能会遇到这样一个问题：fixed「不灵了」，它们可能不再相对于视口定位，而是被限制在了滚动容器之内。

这是因为，在滚动容器经常会遇到的性能瓶颈中，组件的开发者通常会选择 CSS 3D Transform 来强制硬件加速，让滚动体验更顺畅。在开启了 3D Transform 的容器内，由于渲染限制，fixed 元素无法再相对于视口布局，而是被「圈」在了 3D Transform 容器之内。我们只需要反其道而行之，给一个容器开启 3D Transform，就可以让内部的 fixed 元素相对于该容器布局了。

下面我们以 React 为例，实现一个可以兼容 Android/iOS 13+，始终贴着可视区域的 VisualViewport 组件。