给公司做了个新首页, 其实并没有什么特别的更新需求, 主要是招聘客服妹子时别人事先搜不到公司首页也没法了解你们是干啥的, 成果见此: 杭州美登科技有限公司
下面记录下开发过程, 学了很多 HTML/CSS/JS 的知识, 更新了下大脑里的旧内容, 对前端不同浏览器兼容性的坑又踩深了一点
框架部分
看了下现在流行都是单页应用, 开发起来也比较简单, 基本的文件结构和 HTML/CSS/JS 布局参考 CodeCademy 上的 Make a website 课程, 配色取了下我们新 Logo 上的几个色, 用 Color Hex 查了下相应颜色变深或变浅后的色值, 直接套上去的
页面布局和 CSS 自学加抄袭了下 Bootstrap 的 container/row/col 布局, 不过因为是需要啥添的啥, 不是一上了就想好整个框架, 抄的又不到位, 尺寸各种不对, 后来发现原来要再 CSS 一开始就把 box-sizing 设成 border-box, 后面才是熟悉的盒模型的大小
没有分页, 不同内容就大色块大模块, 导航没用 a 标签的锚点, 而是用了 jQuery 的 scrollTop 方法来让跳转过程有动画效果, 这个很简单, 只是最后测 IE 时发现只让 body scrollTop 是不行的, IE 里滚屏应该滚 html. 就是得这样: $("body, html").scrollTop(...);
导航
因为是单页分不同模块, 在导航栏上更新当前活动模块, 就在 JS 里通过监控 scroll 事件来更新 navbar 里不同 li 的 active CSS, 一开始想着优化性能, 对不同模块的 div 的位置做了预处理, 但是偶发性滚屏位置不对, 一直也没找到原因, 加上页面上有高度动态变化的可能, 最后还是老老实实每次都现算, 这么点性能差异应该也无所谓, 反正测试的各种设备都没感觉卡
因为导航栏的跳转也用了 scrollTop 方法去滚屏, 会触发同样的监控事件, 为提高性能并避免因为 CSS 里全局用 em 标注尺寸导致可能出现换算后奇怪的 1 像素偏差引起的 navbar 当前活动模块判断不准, 先是加了个 scrollTo 的全局变量来判断滚屏事件来源, 但是这个处理在大屏幕上可能有问题 (因为屏幕尺寸比模块 div 大, 说要 scrollTop 到最后一个模块, 但实际的 top 还在上一个), 最后用的 setTimeout 设置延迟事件来区分了是因为点导航栏引起的滚屏还是用户自己的滚屏
顺带说一下, 看了下 Bootstrap v4 alpha 的文档, 导航栏滚屏和监控滚屏事件更新导航栏活动 li, 这俩需求都已经有现成的了, 见 Scrollspy
弹层
职位描述用的弹层实现, 弹层的 Modal 用的 lightbox_me, 一切都很顺利, 只有最后测试在 iPhone 上有一定的概率弹飘, Safari 和 Chrome 都会出现, 原因未知, 估计和 slick 哪里冲突了
弹层这个其实 Bootstrap 里的 Modal 支持也挺好的
幻灯片
自动滚屏展示图片, 一开始人肉实现, 只用支持自动滚动什么的也还好, 后来想带支持移动设备上触摸拖动, 看了下估计自己搞太费劲, 还是老老实实换用现成的, 比较了几个后最后用的 slick, 自己重载了部分 CSS 来替代默认的主题
slick 会把要要滚屏的图片或 div 在最前最后做一次复制方便跳上一个或下一个, 但是似乎会导致某些浏览器下带来副作用, 其对容器 div 做了 class 修改, 还是多套了一层防止出现奇怪的问题
Bootstrap v4 alpha 里也看到有直接支持的这个功能, 见 carousel
在照片上加文字, 先试了下 OS X 下的预览做修改, 没法保证不同的图片上蒙层大小和位置一致, 搞不定就让 tuying 去帮忙用 PS 加, 后来想这事用 CSS 估计更简单, 等 tuying 说用 PS 改好图了我说我这边 CSS 也调通了, 不知道会不会被捅死
地图
联系我们那用百度地图 API 来嵌了个地图上去, 写的时候感觉百度地图 API 使用文档组织的还不如淘宝开放平台那个渣, 倒是示例还比较多, 可以各种连蒙带猜人肉测试
地图上加标记弹消息, 如果全用现成的, 对话框的起始点是标记点的标记下方, 很奇怪, 裸写 HTML 反倒是符合预期的标记上方
加上来的地图默认支持滚轮缩放, 不关掉的话电脑上滚轮滚到这里就变成不停缩放地图而不是滚页面了. 关掉滚轮缩放后要加一个显式的缩放按钮组件让电脑上还是能缩放地图, 手机上他会自动加上的其实无所谓, 不过手机上双指缩放这个好像没法禁, 如果页面拉大了视野内都是地图, 那只能重载页面了 (如果这个问题有更好的解决办法也欢迎在下面留言告诉我)
移动设备适配
适配手机, 问题不大, 习惯了 @media (min-width...) 这样后控制下尺寸就好, 不过布局也没法完全流式, 弄了个 640px 的 min-width, 反正 iPhone5 的横向物理分辨率都有 640 了, 捏一下 scale 就好
在电脑上 Chrome 的开发者工具里 device mode 和实际设备上的表现有明显差别, 还是得真机测过才靠谱, iOS 设备大家都有, Android 那边刚好公司新买了个红米 Note2 当测试机, 除了系统自带浏览器外一口气另装了 9 个各种浏览器, 测下来有一些小的不一样, 但是整体兼容性良好, 比 iOS 还靠谱. iOS 里的 Chrome 兼容性很奇葩, 估计跟调的还是 Safari 的 webkit 核有关 (比如 Modal 飞了). Firefox on Android 缩放后会比较奇怪, 导航栏的底色还是没 scale 前的宽度, 不过应该没多少人蛋疼到去手机上用 Firefox 吧
浏览器兼容性
主流的浏览器, 开发测试就在 Chrome 上, 这个倒是不用担心, Firefox 最后找人看看没问题, 应该也还好, 关键是 Windows 下那一坨 IE 以及改了不知道是 webkit 核还是 IE 核的国产浏览器
用 Win10 测试, Edge 表现跟 Chrome 什么完全一样, 不用任何改动. Win10 下默认是 IE11, 然后这货的开发者模式可以模拟 11,10,9,8,7,5 (我也不知道为什么没有 6 但是有 5), 测试覆盖面是够了. 前面那个所有 IE 核都影响 scrollTop 的问题就不说了, 其他问题上 IE9+ 还是挺靠谱的现代浏览器, 都没啥要处理的, 从 IE8 往下, 那都是泪…
到 IE8 开始出的问题, 先是 container 布局控不住尺寸, 放狗搜了个 respond.js 勉强搞定, 然后是没有弧角 border-radius, 这个没有就算了吧, 有些按钮从圆变方还挺带感的, 最后折腾到 IE8 居然显示还勉强凑合, 真是感动到泪流满面
再往下到 IE7 就更多奇葩了, 比如 float:right 会换行, 非得把 float 的 div 放到同级元素的最前面才行 (本来想强迫症的让页面不带任何 CSS 也可读的结果还是没做到裸内容和实际显示完全一样), 比如不支持 display:inline-block, 改成 display:inline 搞定, 还不支持 box-sizing 导致自己写的 col 宽度用百分比的话绝对被折行, 心想用 IE 的只能是电脑, 然后现在电脑屏宽没有小于 1024 的了吧, 估算了下直接硬减了个百分比实现, 不支持 border-radius 另外 padding 什么的实现也很奇葩, 这些就算了, 显示不正常就不正常吧, 勉强能看就好了
主流浏览器没问题, IE8 基本没问题, IE7 甚至 IE5 只要宽容度好一点也能接受, 最后调成这样真的有忍不住学樱木花道来一句 “我真是个天才” 的冲动
为啥要自己作死而不用 Bootstrap 之类的现成框架?
本想写 FAQ 的但不知道看客们会有什么问题, 估计最大的疑虑是为啥不直接用 Bootstrap? 所以就把子标题改掉
我的经验是如果要基于 Bootstrap 弄出自己的风格, 还是要对他那套东西比较深入理解才行, 光重载 navbar 什么的就挺麻烦的, 而我这点需求自己写一个的代价也不大, 关键是可控, 同时自己也能把前端的技能点给各种点亮. 另外就是想要的很多功能都是 Bootstrap v4 里才有的东西, 但这货现在才 alpha, 而且明确说了只从 IE9 开始支持, 浏览器兼容性要死人的