前端

如何得到一个自适应宽度的高宽比固定的 HTML 容器

Posted on by snoopy

写上一篇文章时遇到了一个问题，我想插入一个 bilibili 的 iframe 来嵌入视频，如果直接用 B 站给的 iframe 代码，出来的是很小的一块，强行把 iframe 的 width 变成 100% 后，宽度是自适应撑开了，高度还是只有一点点高，然后 height 怎么写都不太对，如果再考虑手机等小屏幕设备需要自适应宽度，这个更无解了。搜了一圈，找到了一篇文章【前端笔记】使用iframe嵌入等比缩放的哔哩哔哩视频，按这个做法解决了问题

仔细看了下实现，其实挺有意思的，应该可以算前端的一个经典问题，就是如何设定一个 HTML 元素，能做到自适应宽度，且高宽比固定

一般我们需要维持高宽比的是图片，这个在 <img> 标签上可以有各种缩放选项能满足需求。对于视频，或者 iframe 嵌入，则没有比较好的原生实现方式。在上面找到的那个文章里，其实是先构建一个能自适应宽度且高宽比固定的 HTML 容器（一个 position: relative 的 <div>），然后把真正要做到自适应的元素放到这个容器里，并用绝对定位占满空间，那么问题从怎么设定这个元素属性变成怎么得到可以自适应宽度且高宽比固定的一个容器

按搜到的那个实现做，是用一个空 <div>，先设定宽度 width: 100% 可以做到自适应宽度，接着为了维持高宽比，先强行设定高度 height: 0，然后用 padding-bottom: 75% 来做到等比撑开。这里的百分比计算是按照宽度来计算的，详细的定义可以看 w3.org 里关于 box 元素 padding-properties 的定义 http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties。搜索结果里也都有这么来介绍，比如这两例：

今天问公司的前端担当 @tdzl2003，给出了另一个思路清奇的操作，直接塞一个比例图片进去，然后把这个图片撑开就行了，图片可以用透明色，而且 base64 编码后的图并没有多大，不会影响视觉效果也不影响性能，比如要 4:3 就弄一个 4 像素宽 3 像素高的空白图

果然前端都是各种骚操作，各种给跪

原来被 disabled 的 input 元素是不响应鼠标事件的

Posted on by snoopy

前几天做客服的时候遇到个客户来说我们的页面出错了, 两边鸡同鸭讲了半天发现都没法理解对方, 让客户截图后发现果然跟我这边不一样, 远程过去一看, 对面用的是 Win10 + Edge, 在我们本该出现 tipsy 的地方鼠标移上去没任何反应, 客户看不到该有的提示, 也难怪要跑过来找客服

一开始以为是 Edge 和 IE11 又出现什么奇葩的 jQuery 事件绑定错误, 需要在 knockout 的动态渲染完成后再做事件绑定, 但是仔细查了下后发现还不是这么回事, 熊去搜了下表示似乎 “disabled 的 input 元素是不响应鼠标事件的”, 但是为啥 Chrome 又能支持? 把 Firefox 也拉进来测试, 发现似乎不响应是通用标准, Chrome 那个浓眉大眼的货又一次不按常理出牌在鼠标事件完成后另外触发了一次, 所以我们测试一直没问题

既然知道了这么个原因, 而我们又要对一个 disabled 的 input 元素做悬浮事件, 怎么办? 按 Bootstrap 的说法, 在外面包一层, 然后把悬浮事件绑定到包的那一层上就好, 但是这么搞了后还是失败, 各种姿势换了一遍后发现如果我多包一点东西进去, 然后鼠标从多包的那一边进入, 就可以正常触发事件, 这是什么鬼? 想了半天没想明白, 暴力在外面做了一个图标来绑定悬浮事件先解决问题再说

吃了个饭回来, 越想越不对, 难道是因为那个 input 元素有 1px 的 border, 然后导致 Edge 那货一看这个区域都属于 disabled input, 所以其他这个区域的其他元素也不做任何响应? 怒而把包的那一层加了个 border: 5px solid transparent; margin: -5px, 果然就好了… 就仅仅是需要让包的这层真的比那个 disabled input 更大而已

不过还有几个坑没想明白的

  1. 不知道是不是跟 Edge 的刷新率有关, 如果鼠标进出太快, 也可能不会触发包的那一层的事件
  2. 不知道是不是需要额外设置 float 或 z-index 关系, 让包的那一层的 z-index 更高, 这样才能正确响应鼠标事件, 可能也不用去 hack border

最近其他事太多, 这个坑先这么填着, 回头有空了再来细细研究, 写前端真的是折寿啊

写这篇 blog 时去搜了下相关内容, 还有建议把元素不做 disabled, 在 hover 事件里动态设置为 disabled 的乱搞流… 你这样样式都不对的好么

前端奇技淫巧之保持悬浮状态

Posted on by snoopy

先感慨一句, 一入前端深似海, 都是泪

经常要调前端样式, 有一些元素是只在鼠标悬停状态下才能显示, 那么, 怎么看和调试这些元素呢?

在 Chrome 等开发者工具里, 可以在 Element 那个选项卡右边的 Style 选项卡里点那个大头针图标, 将元素强制维持在 :hover 状态. 也可以在 Elements 左边的元素节点上点右键选状态

但这只是 CSS 上的搞法, 如果某个元素是 Javascript 悬浮事件弄出来的呢? 加 :hover 完全木用啊. 这时候可以用更奇葩的搞法: 暂停 Javascript 执行. 就是在开发者工具的 Sources 那个选项卡里, 调试 JS 那个地方有个暂停按钮, 按一下就好了

围观群众: 你特么一定是在逗我, 明明是鼠标悬停才能触发的事件, 鼠标一移开去点暂停键那不就没了悬停状态了么

当然了… 这时候是没法腾出手来按那个按钮的, 但是我们有快捷键啊, OS X 下是 F8 或 Cmd + \, 剩下的就不用过多解释了

写了个 jQuery 动画小插件, 收起飞入抽屉效果

Posted on by snoopy

参考的效果是淘宝加入购物车时, 会将商品图变小, 往右飞入到购物车图标内, 提示这个东西去了哪里, 又从哪里可以找到. 最近我们在美折里做了几次登陆后弹层推荐, 希望用户关闭后还能知道怎么重新打开弹层推荐的内容, 就希望在关闭时给一个动画指示到最后可以重新打开的按钮上

写了一个折叠收起的 jQuery 插件, 放在 GitHub 上: https://github.com/whusnoopy/flyerArchive/

下面测试按钮点击后应该会将本文变成一个红色框收起为一个小方块, 并最后消失在测试按钮上

点此测试

你们说我一个好好的算法工程师怎么就开始各种写前端了呢, 所以这时候应该膜蛤一把, 来背两句诗?

最近写 Web 前端的一些偶得

Posted on by snoopy

最近在公司搞项目上的东西也接触不少 Web 前端, 加上之前给公司做新首页时也瞎捣鼓了些前端的东西, 再仔细看了下 Bootstrap 3 的文档, 发现之前说 Bs4 才有的很多东西其实 Bs3 也有了, 只是在 JavaScript 插件那部分, 都被我忽略了

有一些随意记录的偶得, 给自己做个备份, 也供他人参考

浏览器兼容性

总见 Bootstrap 中文文档里浏览器兼容性一节: http://v3.bootcss.com/getting-started/#support

<meta http-equiv="X-UA-Compatible" content="IE=edge">

更多讨论可见 https://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e 

<meta name="renderer" content="webkit">

目前只有 360 支持, 详见 http://se.360.cn/v6/help/meta.html

JavaScript in Bootstrap

之前做首页时说 v4 才有其实 v3 就有了的

其实可以不用自己写的

一些可以整合的内容

写前端时的其他意外发现

jQuery 里的 .hover() 绑定两个事件完美解决了多年前想做的 “悬停时出现弹层, 且鼠标从悬停触发元素移动到弹层上也不消失” 的事, 后来想明白了其实是因为之前我修改 display 的元素并不在 hover 元素内, 所以移出去就挂了

<div id="outer">
  悬停项
  <div id="inner" style="display: none">
    悬停内部内容, 从 outer 移到 inner 这部分也不会消失
  </div>
</div>

$("#outer").hover(function() {
    $('#inner', this).show();
}, function() {
    $('#inner', this).hide();
});

给公司做了个新首页

Posted on by snoopy

给公司做了个新首页, 其实并没有什么特别的更新需求, 主要是招聘客服妹子时别人事先搜不到公司首页也没法了解你们是干啥的, 成果见此: 杭州美登科技有限公司

下面记录下开发过程, 学了很多 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 开始支持, 浏览器兼容性要死人的