当前位置:

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

1年前 阅读 / 200 来源 / 原创 文 / 管理员

距离上次发布的“Avatar”主题已经过去了大概9个多月的时间。咳咳,是有点太过于那啥。其实,我还是可以找到很多借口来搪塞的,比如:工作...

【演示数据】

距离上次发布的“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 组件。



11

评论列表
共1条评论
  • # 网友 2021/08/25 16:48:28

    111111

猜你喜欢

Powered By YzmCMS内容管理系统 © 2014-2020 袁志蒙工作室 · Powered By YzmCMS京ICP备666666号
相关侵权、举报、投诉及建议等,请发E-mail:tonney@duoguyu.com

友情链接: YzmCMS YzmCMS社区 多骨鱼