发现了一个令我震惊的前端面试绝杀题--移动端浏览器兼容

2017-05-08 23:19:52 +08:00
 jackon

有没有遇到过移动端的浏览器兼容问题?

最近一周,面试了 20+ 人,知道这里存在问题的,不到 4 个人。
而这四个人里,大概只有 1 个哥们实际处理过。

大部分人都是反问我:
Safari / chrome / Firefox 上没有多少兼容性问题吧?
我一直认为是一个非常基础的问题,
认真工作半年以后都会知道的基础问题。

我想,这应该是因为,
大部分的项目,
没有用户反馈/投诉机制,
前端没有监控能力,
所以,根本不知道这里有多少的体验问题。

不知道是我们公司收到的简历质量太低,
还是当前业界现状。

做为一个非专业的前端,列举几个我知道的坑

  1. 虚拟键盘引起的兼容问题。比如: http://stackoverflow.com/questions/24557780/ios-7-fixed-footer-toolbar-breaks-on-virtual-keyboard
  2. touch 事件引起的。-- 手机端需要单独处理,但手机浏览器之间是否一致,不了解。
  3. iOS 和 android 系统导致的差别。比如,微信内置浏览器。
  4. 微信浏览器,也可以列一条专门吐槽了。
  5. 安卓厂商们魔改(魔法一般的莫名其妙的修改)过的操作系统。三星手机都遇到过,大概是 input 内的元素居中有问题。至于国内厂商们魔改出来的奇葩兼容问题,罄竹难书。

不是说需要面试者回答出具体的细节,
而是,至少应该知道这里有坑吧。
即使自己的项目没有能力检测出这些 bug,
难道也没有听朋友们聊起过?
或者,看文档的过程中,就没有一篇文章提到过这类问题?
在起码,准备面试的时候,经典面试题里也可以搜到过吧。。。

有一点不太理解,为什么。

大家如果有其他浏览器兼容的坑,也可以一起吐槽一下。
我也补全一下自己的清单。
thanks :)

最后,夹带私货。
我司招前端。
硅谷创业公司,已经获得 VC 融资,主要创始人都有多次创业经验并成功退出。
核心产品是,利用大量的数据分析,帮助应聘者找到适合自己的职位,目前主要针对北美市场。
详细: https://www.v2ex.com/t/358568

如果你恰好知道这些问题,或者感觉这种问题太水,
不妨找我聊聊新的工作机会,万一我们我们一起工作会更开心呢?
我的微信: kunth002

37937 次点击
所在节点    程序员
121 条回复
jackon
2017-05-09 01:44:23 +08:00
@yangff 我也遇到过 chrome 的神奇 bug。

chrome v52 版本,源视频如果有 rotation 参数,视频会被压扁。丑到没朋友。
bug report: https://bugs.chromium.org/p/chromium/issues/detail?id=632624
zhpech
2017-05-09 01:53:13 +08:00
iOS Click 别的不知道…说起来还没有在工作中写过移动端…没毛病
scnace
2017-05-09 02:02:25 +08:00
“微信内置浏览器就是一个很神奇的东西了”
yangff
2017-05-09 02:14:34 +08:00
@jackon 不过也就是感觉这两三年左右 chrome 的 bug 越来越……鬼畜?以前虽然不能说没问题,但是确实可以说很少遇到……
yangff
2017-05-09 02:24:45 +08:00
ios 的 animation 之前也有个奇怪的问题坑了窝蛮久,记不得具体是啥了
Srar
2017-05-09 02:57:37 +08:00
偏个题说下 edge 有个 bug: 域名中带"-"的会使设置 Cookie 失败, 当年日了狗了调几小时. 不知道现在修复没
peneazy
2017-05-09 06:01:39 +08:00
这个要看产品需求和开发成本,不能苛求对所有平台所有浏览器都兼容,就说淘宝和饿了么,在 QQ 浏览器里是各种问题。前端的首要功能是产品功能的实现,而不是所有浏览器的完美表现。这年头,能可靠实现各种功能的前端都很难得了,有多少前端不懂 http,不懂 web 缓存,不懂性能,不懂正则,不懂算法。就举两个例子,后端给的接口不合适,前端是否能用复杂度低于平方阶的算法给重构;产品需求改了以前从网上复制的正则不能用了,前端是否会自己写正则。熟悉这些的前端,在北京很难用低于 18K 招到的。
likai
2017-05-09 06:14:15 +08:00
ios input 难道是弹出输入法界面时,输入框被遮盖这个么?
stiekel
2017-05-09 06:52:43 +08:00
其实微信内置浏览器,也有很多不同,不同微信版本、同一版本在不同的手机上都有不同,甚至碰到个极端的,微信版本一样、手机一样、系统的版本号一样,但最终结果却不一样……
zyEros
2017-05-09 07:34:38 +08:00
没必要苛求兼容性问题,这些兼容问题慢慢会被抹平,单独考实际意义不太大,遇到能再解决就行了,更重要是基础能力
wemore
2017-05-09 08:03:47 +08:00
哇,刚遇到虚拟键盘的问题。浮动窗口底部有输入框,触发键盘会遮住看不到。各位大佬大家有啥好办法没。目前用 resize 事件勉强实现了弹出输入法改浮动窗口的 top 值。
k9982874
2017-05-09 08:13:51 +08:00
现在前端都是大爷,拿到数据就直接显示,写个 for 循环处理数据都不乐意,你让这些大爷去结局兼容性?
你会得到一个答案:这设计的问题与“我”没关系
呵呵呵呵
duan602728596
2017-05-09 08:17:38 +08:00
其实只要老老实实设计,别搞什么幺蛾子,很多 bug 都是可以回避的
gundam1993
2017-05-09 08:20:52 +08:00
微信浏览器真的无力吐槽…
wly19960911
2017-05-09 08:29:07 +08:00
@Srar 应该没问题了,我域名带 - ,session 建立成功没问题,当初做东西测试用过
wly19960911
2017-05-09 08:33:31 +08:00
@wemore 这个问题我看过,因为淘宝的旺旺一定要开手机,然后我打开 chrome 调试工具改成手机的模式,发现手机网页旺旺聊天框输入时会被移动上去,才意识到虚拟键盘有这个问题,用输入框的 focus 事件我认为更好。
wly19960911
2017-05-09 08:37:02 +08:00
@wly19960911 打错。淘宝的旺旺一定要下载软件(抱歉连发了三个
dtysky
2017-05-09 08:43:19 +08:00
兼容问题本质上是坑,和技术水平没有必然关系
我转行前端才一年,之前各种兼容性问题都不懂,最近两三周遇到的兼容问题却基本都能很快解决,包括微信啊 UC 啊啥的

说实话,兼容性问题遇到了现场解决就行了呗,基础好的谷歌搜一搜周围交流交流解决起来很快好么,作为重点要求拉出来说事也是无法理解。。。
CFM880
2017-05-09 08:47:57 +08:00
我只遇到 CSS 的 absolute 在 iOS 上不管用,flex 在低版本 iOS 不能用,为啥都是 iOS
peneazy
2017-05-09 08:53:37 +08:00
@k9982874 碰到水平差还装大爷的,直接和他领导反映,别弄得自己不高兴

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/359985

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX