温故而知新,关于国内火车票

好几年前因为和 12306 各种搏斗,写了两篇关于订票的分析,详见 12306 和火车票那点事补遗: 12306 和火车票那点事,参考了当时能找到的其他国家地区的做法,提到两点可以改善的,目前看都已经实现了

1# 排队时就可以先付全款, 这样一旦排到票马上就能出票, 不至于说排到票时自己不方便, 因为没法付款而导致被从队列里强制踢出去

现在的候补购票已经全面推广了,先付钱,有新的空位直接出票,可以同时排不超过四趟车

2# 退票费按退票时间到开车时间的间隔依次递增, 越晚退票手续费越高, 这样也让那些买多张票备用但最后只用一张的人提前把资源让出来给有需要的人 // 现在就很多人买好几张票备着, 走之前才退, 结果其他有需要的人也来不及捡漏

退票费已经改成十五天前不扣费,十五天到两天 5%,两天到一天 10%,一天内 20%,而且对改签后退票执行改签前的时间席位计算,避免有人钻空子改签更后面的低级别席位来节省退票费。春运等时段不分提前量统一 20% 退票费,这个其实又把节奏退回一样了,但这种特殊时段,再提高估计正常出行的人要各种不爽,也没有太好的办法

珞樱十五年

珞樱,武大原创音乐的第一张结集,晚上在小区溜达时突然想起来,然后发现虾米里还有全集: https://www.xiami.com/album/4NdC39fd1

看虾米的信息,是 2004 年发布的专辑,实际的时间,应该不是 2003 就是 2004 吧,刚好是自己进入珞珈的前一年,到校后也入手 CD 一张如今在家珍藏。如今十五年过去,又是一年高考完了填报志愿和毕业季,初闻不知曲中意,再听已是曲中人

就说之前一定贴过歌词什么的,找到了 珞樱

换了个手机,红米 K20 Pro

换机比较

两年前买的小米 6 是 6+64 的版本,现在各种 ROM 空间不够,虽然其他都用的还好,但,都两年了,不来个新的?身为一个 miboy,舍不得的还是 MIUI 的各种习惯,iOS 还是不想被苹果各种限制加上价格真的不友好,还是回来看了一圈小米家的新手机,米 9 摄像头凸的太厉害,9SE 担心 7xx 处理器过一两年性能还是不行,刚好红米有出 K20 Pro,算是相对平衡了下各个点。至于友商们,全市场机器现在贴着小米打的也是越来越狠,性价比上大家也不会拉开太多,还是类似 MIUI 等一些细节问题上的差异,算了不改换门庭。考虑到最近几次换机都是存储不够是一个明显诱因,这次直接 8+256 顶配走起

红米 K20 Pro 的优劣已经被说的够全了,对我来说,优

  • 大电池
  • 真全面屏
  • 摄像头不明显突出(至少随便一个壳就能不突出)
  • 屏下指纹
  • 855(性能即正义)
  • 有耳机孔
  • AMOLED 可以息屏显示

是优点但无所谓

  • 升降前置摄像头(看好下半年出屏下前摄,明年普及)

  • 没红外(当遥控器用还是很有必要的)

是劣势也无所谓

  • 没无线充电
  • 呼吸灯位置不好

入手迁移

小米官网所谓的预购入手,其实也就等了两三天,加了 27W 充电头的套装,到手后直接用设置里的换机助手,老数据绝大部分无缝迁移过去了,不过还是遇到一些小问题

#1 Google Play 无法使用

K20 Pro 的 MIUI 自带了 Google 服务框架,按各种提示,随便找个 G 家的 App 装上,其他的各种依赖都会自动装上,不用找什么谷歌安装器了。不过装是装上了,但我的账号一直没法登陆使用,各种搜都说是 googleservice.cn 还是 googleservice.com 的问题,但我都挂全局代理了这个没道理啊。后面有人说换个账号就可以,那就换个账号登陆,果然能用,虽然没在 Google Play 上买过付费的应用,但总还是不爽。考虑是不是主号之前为了注册 Google Chrome 开发者信息,把账号改成了港区,又各种搜教程把账号改到美区,刚改好还是不行,等第二天打算死心后又突然好了,真的是区域的问题么

#2 部分 Google Play 应用的更新、语言和图标问题

MIUI 换机后对于应用应该有部分是直接原样不动搬过去,有一些应该是保存了部分数据,重新下载的应用,但部分应用并不是最新版,以及图标不对,看了下基本都是国内应用市场也有,但我用的 Google Play 版本导致的,这个等 Google Play 账号问题解决后,重装一遍就好了。部分应用比如 Chrome,应用内语言一直是英文,没有切换界面语言的入口,按网上的某些说法改 MIUI 的系统语言也不生效,卸载重装就好了

#3 NFC 杭州通卡(无解)

之前在小米 6 上开了一张 NFC 杭州通卡,里面还剩了点钱想转移过来,发现杭州通不支持转卡,再一看杭州通都不支持开新卡了,翻了下相关信息,应该是杭州通现在就是不给各种第三方开放了,大意是反正现在刷公交卡(广义的各种公交卡),银联闪付和支付宝微信都可以,第三方就别开了。这个最坑的是以前的卡还不能退,只能先找机会拿着米 6 当公交卡用,把钱用完拉倒?这个钱还不支持任意金额的充值,想刚好用完估计还有点难

长期体验

到现在用了两周,对比下体验

#1 重

这个重是随时随刻都能感觉到的重,不管是拿手上还是放兜里,真怀念以前 Mi4c 那个塑料壳拿着的轻巧,现在偶尔拿一下以前觉得重的米 6 都感慨好轻啊。为什么现在大家都去整不锈钢中框玻璃后盖,虽然漂亮,但是死沉死沉,后面摄像头又突出来,套个壳也看不见啊,不如直接跟当年 Nokia Lumia 一样直接塑料壳走起,怕小白们觉得 low 就换个「聚碳酸酯」这样小白们听不懂的名字不就高大上了

#2 屏大真好

全面屏除了当年看 MIX 发布时的震撼感外,真的到手上用久了才发现是真好,可视面积真的是字面意义上的肉眼可见的变化,还是拿垫背的米 6 比,现在回头拿起了看一下「我勒个去这个屏怎么这么矮,好多东西看不到」

#3 几乎不存在的电量焦虑

之前的米 6 续航也不差,我没有重度玩游戏,一天一充没问题,一般也是在办公室或睡觉前顺手插着充一下,18W 的快充补电也快,现在的 K20 Pro 似乎我还从来没用到过 20% 电量以下?随手充一下都能续好久

#4 边沿误触

其实之前用米 6 的时候偶尔就有这个问题,单手拿着手掌边沿容易按到或误触,全面屏后这个问题只会越来越严重,不过比预期的似乎要好一点点,可能是现在对于手掌识别比以前好了?

#5 指纹识别精度和效率

最近几年一直扛着没换机也是对后置指纹的不满,平时用没啥,如果是开车等红绿灯的时候需要看一下某条消息的全文,后置指纹我怎么去解锁?人脸识别也有类似的问题,对准我了还好,没对准怎么办。屏下指纹目前看是比较均衡的解决方案,当然屏下指纹加人脸识别更好。目前用下来,指纹识别区域只有亮提示那一小块,因为不像物理指纹识别能很容易盲摸到,在盲操下这个区域还是略小,解锁成功率和效率上感觉还是比之前的米 6 差一点,经常按完并不能确定有没有解成功,但从满足日常使用来说是够了

#6 相机

各家各新机吹的重点,似乎好一点?我的需求现在主要还是拍娃,核心痛点是运动抓拍,至少对我们家这只动个不停拍出来都是各种无影手无影腿的娃来说是,有改善但还是各种拖影

下一次的期望

最后,期待的下一代的水桶机能补上这些就更完美了

  1. 屏下前置摄像头(最好能带结构光)
  2. 更大的屏下指纹识别区域和识别效率
  3. 红外
  4. 无线充电
  5. 位置更合理的呼吸灯(比如耳机孔旁边,或 OLED 屏息屏显示等更友好的提示方式)
  6. 潜望镜结构的后摄,完全不突出,不带壳也不担心放不平或磨花
  7. 更轻的材料

莫莫第一次看电影

看的电影是 巧虎大飞船历险记

从莫莫七个月开始定巧虎,去年满两年了又续订了两年,最近一期的 DVD 末尾就有推这个电影了。在公司里某天 HR 同学问我说我家娃能不能看电影,说怎么想起来问这个,说弄到巧虎这个电影的首映场,但是她没注意时间跟他家娃的围棋课冲突了,我说担心莫莫可能坐不住,那边各种怂恿说没事的总有第一次的,这个看着似乎对小朋友更友好,于是就这么愉快的弄了票过去,因为我们确定能不能去花了比较久,等换票时看只有第一排了,给小朋友也选了位置坐在爸妈中间

首映场在西湖文化广场的新远国际影城,一个以前从来没去过也没关注过的影城,西湖文化广场倒是带莫莫去自然博物馆去过两次,时间是下午两点到三点半,感觉略尴尬,这个点很多小朋友不是午睡没睡醒,或刚睡起来怎么赶过去。不过我们家这一只在家都不午睡的,刚好上午就过去,逛逛自然博物馆然后吃个饭就可以去看电影了

按首映场约定提前二十分钟到影城,换实体票,领加油道具(一个纸卷话筒),还拿了贴纸小礼品,按巧虎 DVD 里预告的情况,会有人偶上台互动,所以进去后看坐第一排也还好,不是 IMAX 也没有那么仰着看的问题

可能照顾是儿童场,开始前没有任何广告,直接就龙标播放了,一开始有一小段电影自己的观影注意事项,比如全程不会关灯,只是把亮度稍微调低了点,不限制说话啥的,中间还有需要互动的环节(前面那个话筒有用了)。也不像一般的电影开场直接讲故事,这边开场前还有出场人物介绍(主要都是巧虎各种系列里一句出现的常规角色),给一个剪影和介绍,让猜是谁,鼓励大家拿起话筒一起喊出角色名字,这个环节莫莫的互动感还挺好的

电影进入正题后出现第一次反派角色,大概二十来分钟时,莫莫开始坐不住,先幽幽的说「我害怕」,一开始爸妈想是不是灯有点暗或怎样,说抱着你一起看不害怕的,然后莫莫还是控制不住的哭闹起来,一直说「我害怕」,为了安抚情绪和不影响其他看电影的小朋友和家长,和妈妈一起把莫莫抱到影厅外面坐下,给吃了点小零食和酸奶,不过情绪一直没缓过来,后面爸爸抱着在后门处看了一下还是闹着要回去,确认好回家的话就没得看了还是要回家,只能悻悻的回来(爸爸妈妈都还想看完的呢 XD)

回家路上在车上很快睡着了,估计除了电影冲击力,这个时间要求好好坐着是容易闹觉,可能下午再晚点的场次让小朋友睡过再来可能会好一点?

等晚上吃过饭在家各种嗨时,又会突然冒出来高兴的大喊「卡比是个大坏蛋!」,就是看电影时引起哭闹的那个反派角色名字,这,小朋友你那时候可是闹着要走,真的是被大坏蛋吓到的关系么?但是现在这个情绪明显是很兴奋的啊,爸爸妈妈继续怨念没有看完电影

记一次诡异的被 yarn 坑的过程

事情的起源是 @tdzl2003 说他用 VSCode 的 remote 模式用的很开心,放弃 Hyper-V 回到 VirtualBox 的怀抱,笨狗去看了下 remote 相关功能好像还在 VSCode Insider 里,可以装来试试看,弄好后看了下文档和教程,知道插件分装在本地和装在远端,但是项目里 eslint 插件就一直在报错,说找不到模块

找不到就去补吧,到远端的目录下 yarn install 装好依赖,回到本地一看,还是报错,怎么会这样?在远端也执行下看看?

$ ./node_modules/.bin/eslint index.js
Error: Cannot find module 'jsx-ast-utils/elementType'
...

What the fuck?! 一定是哪里不对,把 jsx-ast-utils 这个包也重装一下?再来

$ yarn add jsx-ast-utils
$ ./node_modules/.bin/eslint index.js
Error: Cannot find module 'jsx-ast-utils/elementType'
...

你特么是在逗我?去看看这个包到底怎么回事,里面只有 lib src 两个目录,其他都没有,看起来好像是不太对

确认了一下环境,Windows 10 Pro 1903, WSL Ubuntu 18.04.2, node 12.3.1, yarn 1.16.0,都是最新的,换个环境试试看?在自己另一台 MacBook Pro 上 yarn install 后就是正常的,hmmm,难道是 Windows 目录挂载到 WSL 下后文件权限啥的锅?试了下在 WSL 里用 WSL 的文件系统重新来过,问题依旧。在 Windows 里把 WSL 映射成网络盘,用 PowerShell 进到 WSL 文件系统里 yarn install 就是好的,嗯?好了?回到 WSL 下执行 PowerShell 安装好的 node_modules 也成功

难道是 WSL 的奇怪问题,搜了下好像也没有任何相关信息?难道是最近新崩的问题所以大家都找不到,我印象中之前确实也能跑来着?那就是这个锅了。等几乎认定就是 WSL 有奇怪的问题后,晚上回家后拿另一台同样环境的机器,在 WSL 下就正常的装好了

这这这,等会,冷静一下,一定有哪里不对,要不用下重启大法?把所有相关的东西都干掉重来一下?在有问题的机器上,把 git 仓库清空重来(虽然之前已经换不同的路径做过了),把 nodejs 和 yarn 都卸载重装,对了是不是跟 yarn 源还有关系?确认一下

$ yarn config get registry
https://registry.yarnpkg.com

果然这里不一样,忘了改成淘宝源,改一个再来一次(官方源为啥可能会有坑嘛,难道是最近撞墙撞的?不管了先死马当活马医好了)

$ yarn config set registry https://registry.npm.taobao.org
yarn config v1.16.0
success Set "registry" to "https://registry.npm.taobao.org".
Done in 0.06s.

这下应该没问题了,走你,等 yarn install 跑完,先检查下 node_modules/jsx-ast/utils/ 路径下文件对不对,嗯?还是只有 lib src 这两个文件夹?这到底是为什么啊,yarn 你这个坑货,要不换 npm 试试看?

npm install 跑一下,提示有文件权限不对,看了下,哦是之前有 sudo npm install -g 装过东西,把 ~/.npm 目录下相关内容清掉就好了。用 npm 装完一看,好了。。。呃,果然 yarn 你个坑货到底哪里不对啊!?

缓存?去吧 ~/.yarn 下的内容都清掉,/tmp 下有一堆 yarn- 开头的不知道是啥应该也都可以干掉,再来,还挂?去搜 yarn install package missing files,终于看到了一个很相似的情况,不过他这个最后也是清了 yarn 的 cache 就好了。看了下除了 ~/.yarn 还有人说 Cache 目录是 ~/.yarn-cache 目录,但是我压根都没这个目录啊。顺着这条线索继续搜,找到 yarn cache clean 这个命令,执行后再装就好了

那看来就是之前的缓存有问题,而我弄这么多各种重装也并没有清掉 cache,或者触发重新从远端拉包。那么 yarn 的 cache 到底在哪里?到用户根目录下查看所有文件,发现有一个目录叫 .cache,看着挺可疑,进去看看果然里面有 pipyarn 等目录,看了下里面文件时间,就是这了,应该就是之前某次安装过程中被强制退出,导致那个点在装的一个或几个包是不对的,但是目录还在 yarn 就一直傻乎乎的用本地的

结论:yarn 的 cache 机制对包的完整性保证不够,如果之前安装过程中有异常退出,赶上异常退出过程中的包就有可能损坏,后面如果不手动清 cache,就会一直挂

恐龙专家

男孩子们的爱好里,车和恐龙应该是两大主流,我们家莫就走上了恐龙这条路

最早应该只是某些绘本或碰碰狐的英文儿歌里有出现恐龙,以及一部叫恐龙列车的动画片,然后是去书店看书有看到恐龙书,后面就一发不可收拾,在家需要各种看恐龙的动画片和科普片,都能自己熟练的找到妈妈的 iPad,麻溜的解锁打开爱奇艺从播放历史里找自己之前看过的,还特别沉迷看各种恐龙打架的模拟,去书店一定要把各种恐龙书都找出来看一遍,现在家附近几个小朋友能去看书的地方,哪几本恐龙书有什么内容爸爸都能背下来了

带来的结果之一是经常喜欢学恐龙嗷嗷叫吓唬人,说我要把你吃掉

另外的结果就是真的成了恐龙专家,要买各种恐龙的绘本和书,知道食草动物和食肉动物区别,认识各种恐龙,属于什么分类,书上一翻出来立马就能说出来这是什么,妈妈买过一套十本的恐龙书,上面似乎就没有不认识的了,估计得有小一百种了?好多种爸爸妈妈都还分不太清呢(手动捂脸

去年十一前妈妈和伯伯带着去过一次浙江省自然博物馆,现在也心心念念要去看恐龙骨架,周末爸爸带着去,果然还是有不少,但是其实也只是自然博物馆其中一层的一小部分,而且好多变成骨架后就不好分辨了,只有一些有特别显著特征的才好认识,不过小朋友还是很满足啦

莫莫三岁

三岁生日都过了好久才来写这篇,因为感冒咳嗽弄了快一个月,去体检就拖了大半个月,身高 94cm 体重 13.0kg 还是稳定在 15 到 30 分位之间徘徊,一直怨念没生病前好像都有 14kg 了,小毛病弄弄还是吃不胖

现在大了会自己表达后,带娃的很多时候就简单很多,至少他的诉求不用只靠猜。另一面因为自己有各种主见,有时候想哄住也需要更多的技巧

就说感冒咳嗽弄的比较厉害后,还是打算带去医院看看,坐上车一出小区发现方向不对,立马抗议「我不要去医院」,不过其实又还好,等到了那边,问诊什么的还能配合,听诊器过来都咯咯笑。对于打针抽血还是各种怂,事先各种不要,闹情绪扮可怜能用的招都用上,但是完事后又要装坚强,「我不怕打针的」

说到嘴硬,现在还是各种小男子汉的风格,事先各种不要不要,等过了那阵其实自己也能接受后,又不好意思反悔,这时候就需要等人给台阶下了,比如早上有起床气,会说我不要出去玩,等缓过去后再问他要不要出去玩,还是会弱弱的哼哼「我就是不要出去玩」,但换个问法「我们去小游乐场玩滑滑梯吧」,立马就会很高兴的说「我最喜欢玩滑滑梯了」

例行的吃喝拉撒睡的记录。吃现在很多东西都和大人一起吃了,已经有一些特别的偏好,比如土豆丝、茭白、豆腐干,对于鸡腿也还是持续的热爱,只是让莫莫妈妈又没得鸡腿吃了。每天一盒酸奶也变成了例行的安排,晚上睡前会要求一瓶配方奶,一般是 200ml,早上醒来前再喝一瓶 200ml 或 150ml 的配方奶,上午下午不定期补一些小零食和水果,有一段时间下午两三点还会主动要求喝奶,后面还是稳定改成酸奶。吃东西可以自己动手,奶瓶自己抱,喝水啥的只要不是自己玩疯了,还是知道渴了喝水,自己抱吸管杯自己打开喝。家里说还是让他戒奶瓶用普通的杯子喝水喝奶,但是小朋友睡前的这一口瘾还是奶瓶才止得住,有跟大人一起喝纯牛奶,但是没有定时定量,主要还是他看到我们喝和自己要求喝也每个准数

白天撒尿拉臭都会主动说,彻底摆脱尿不湿和拉拉裤,自己还不会在撒尿拉臭时脱穿裤子,可能也跟我们一直有去照顾帮忙有关。在家拉臭用小马桶,会要求照顾的人帮按着小鸡鸡免得尿腿上。晚上睡觉还是穿拉拉裤,早上有时候看也并没有尿,但不稳定,还是先穿着吧。不愿意在外面拉臭,憋可能也要憋回家,或者一般都在家拉好过才出去,现在一般都是稳定的早晚各一次

在家时不午睡,偶尔有过两次自己睡了的,但发现真的只是偶尔,并没有成习惯,不过周末带出去玩,下午坐车回去多半还是要睡一下,但是到楼下停好车抱回家时醒了就又不会睡。晚上习惯性的九点左右喝奶,然后床上要求读书讲故事或自己滚滚滚,一般得十点后才睡着,早上不喊的话还是八九点才醒,如果叫的早了还是会有起床气

数数现在能比较正常的数到 20 往上,少于五个的现在多半不挨个数而是直接报结果,往上数还是没耐心一直数下去,中间总会走神给数乱掉。逻辑倒是一等一的好,各种理由一套一套自圆其说没有任何问题

之前被爸爸各种玩的木质火车轨道现在自己也可以玩起来了,一些细节需要帮忙而已

莫言莫语 7

其实小朋友还是长的很快的,特别是脑力发育,最近偷懒没有写 blog 记,发现在手机上零零散散记的片段关键都好多了,而且,有一些现在感觉又没有那么激动了(果然长太快嫌弃更小时有点弱?)

大人不可以吃的

小馋猫各种贪吃,贪吃就算了,对某些分量不多的看只剩一点了特别护食,发觉有大人盯着想要,或逗他说给我吃一点好不好,立马很严肃的来这么一句

我会骂你的
我会打你的

某段时间对于大人的反抗就是这样,会严肃的跟你这么说,如果真生气了也确实会打一下,不过更多时候都只是警告,而大人这时候都是被萌到笑翻,并没有怎样

打人是不对的,骂人也是不对的

遇到他说会骂人会打人或者真的有打人时,会跟他讲打人不对骂人也不对,然后这个娃就经常这样反过来教育大人严肃提醒

男孩子跟男孩子睡,女孩子跟女孩子睡。爸爸你跟我睡,bebe 你去跟妈妈睡

跟他讲了男女有别,这娃有时候想黏爸爸,到晚上洗漱好准备睡觉时就会这么要求,也是让人笑的不行

那我的老婆呢?

续上,跟他讲爸爸和妈妈睡是因为老公和老婆一起睡的,这娃很自然的就接上来这么一问。呃,我也不知道你老婆在哪,这个以后要靠你自己了

你放一点白糖吧

早上喝粥,爸爸喜欢用小鱼干当浇头,伯伯喜欢加白糖,看多了等伯伯端碗出来时,会主动建议下

你怕辣吗?

续上,有时候会问伯伯为什么不吃小鱼干而放白糖

你是湖南人吗?湖南人不怕辣的

续上,伯伯说我怕辣不要吃小鱼干时,这娃立马又开始教育作为湖南人不要怂

爸爸你的老婆是谁呀?
是我的妈妈!

现在对于家庭成员关系的各种转换要清楚和熟练很多了,晚上陪他睡觉玩时这娃精力充沛还是会自问自答各种嗨

你老婆来了

续上,爸爸在房间里哄睡时,妈妈推门进来看这娃是不是还在嗨,这娃抬头一看立马淡定的告诉爸爸

梁咏琪 C’est La Vie

各个音乐平台都没有好的分享方式了,QQ 音乐连 Web 端搜索浏览都各种受限,只能先给单曲链接 梁咏琪 – C’est La Vie

想到这首歌是因为前两天下班跑去洗车,还惊奇怎么洗车店人这么少,都不用排队的,然后到家晚上就听到外面在下雨,正是这首歌里唱的

刚洗完车通常就下雨
要找的人他常常没开机
难忘的人总是忘了你
别介意 这是定理

果然这才是人生啊,C’est La Vie 应该是法语「这就是人生」,好多歌手都拿这个做过歌名

至于梁咏琪,则是另一个有念想的故事,感觉大众对她的印象应该都还是「胆小鬼」和「短发」两首歌?或者熟悉一点的再加上「花火」「中意他」「透明」?老实说梁咏琪作为歌手并没有太多特别的,更像是港台娱乐工业下批量生产的其中一员,有一些小清新小伤感,高妹这个外形定位有助于提升辨识度。但是,架不住某只喵喜欢她,所以也爱屋及乌去听了挺多梁咏琪的歌,也这样才能知道这样应该算小众的歌词

说远一点,在上高中开始听流行歌曲后,听梁咏琪比较多也比较耐听的应该也是《透明》这一张专辑,里面我喜欢的比例高一点,后面包括魔幻旅行、我想我唱、归属感里面,也都只是能有那么一两首可以一直听下去,再往后,似乎就是《顺时针》这一张精选集的好歌率高一点

09 年去香港,在理大呆着时才突然发现校友里也有 Gigi,仔细看了下应该比较偏职业教育,而且也几乎没有从事过专业相关的工作。不过对于正经学历高一点的艺人,整体的印象还是要好很多,不是看不起下九流,而是正经上学,确实还是要知书达理很多

都忘了 04 年夏天去武汉,然后回去时带给喵的到底是哪一张,确认过发行时间,再看看好多年没听的歌词,确认应该是《归属感》,再摘录里面《只是因为爱你》的一段

只是因为爱你
可以回答所有的怀疑
只是因为爱你
所以付出所有不在意

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

写上一篇文章时遇到了一个问题,我想插入一个 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 像素高的空白图

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