关于面试:前端面试宝典移动端核心知识篇

想零碎学习前端面试题，强烈推荐浏览在线电子书（反对手机版，不断更新）。

本书特点：零碎全面（涵盖前端核心技术点），简洁，针对性强（针对面试场景设计）。

欢送在 github 上留言反馈

几个要解决的重要问题：

布局 > 字体大小 > 1px 边框 > 高清图

参考资料：

挪动端高清屏适配计划

px: 相对长度单位，
rem：绝对长度单位，绝对于根元素 html
em：绝对长度单位，绝对于父级

参考资料：

css 单位中 px 和 em,rem 的区别

原理：

300ms 提早问题，事件穿透了（可跨页面）

解决方案：

不要混用 touch,click，touch300ms 会触发 click
tap 后提早 350ms 再暗藏 mask，打消掉 touch 之后的 click（tap 后提早 350 毫秒再暗藏 mask）
第三方插件 fastclick

伪类 +transform（scale）实现
border-image，backgroud-image 实现
viewport+rem

解决办法：

应用 svg 来设置 border-image；

.example {border: 1px solid transparent; border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'height='2px'%3E%3Crect fill='%2300b1ff'width='100%25'height='50%25'/%3E%3C/svg%3E") 2 2 stretch; }

html5 的兼容性能够应用 htmlshiv.js 来解决（能够兼容到 ie6-ie8）
css3 新个性，独自减少前缀（能够应用 postcss 的插件 Autoprefixer）; IE 条件正文
js 兼容性：jquery

ios 下软键盘弹出，fixed 元素容易定位出错，影响 fixed 元素定位；

解决方案：可用 iscroll 插件解决这个问题；

zepto 点击穿透的 bug：应用 fastclick 插件代替
挪动端 300s 提早解决计划？

应用插件 fastclick
应用 zepto 的 touch 事件代替
能够绑定 ontouchstart 事件

原理：

300ms 提早问题，事件穿透了（可跨页面）

解决方案：

不要混用 touch,click，touch300ms 会触发 click
tap 后提早 350ms 再暗藏 mask，打消掉 touch 之后的 click（tap 后提早 350 毫秒再暗藏 mask）
第三方插件 fastclick

一、APP 调用 H5

【不倡议应用】app 做为容器，尽量不要去调用 H5 的办法，这样会导致数据流凌乱，APP webview 容器不能做到模块化

步骤

h5 中裸露一些全局对象, 把变量，办法注入到 window 对象下
app 中调用这些对象

二、H5 调用 APP

因为 h5 不能间接拜访宿主 APP，所以这种调用绝对简单一点

1）APP 向 h5 注入一个全局 JS 对象

长处：简略

毛病：可能存在安全隐患,android 零碎

H5 中间接调用：

window.appSdk.double(10);  //20

2）H5 发动一个自定义协定申请

scheme 协定，app 的一种页面跳转协定

步骤：

【定协定】app 自定义协定
- ydl-user://ceshi/list 跳转到【原生】测评列表页
- ydl-user://h5/test?params={“url”:” http://www.x.com/ceshi/1″} // 跳转到【H5】测评详情页，params 参数局部应用 UrlEncode 编码且不能有空格
【定回调】h5 定义好回调函数
- window.bridge={getDouble:value=>{}, getTriple:value=>{}}
【发申请】H5 发动一个自定义协定申请，
- location.href = ‘sdk://double?value=10’
【拦挡并解析申请】app 拦挡这个申请，进行相应操作，获取返回值
【调办法】由 app 调用 h5 中的回调函数，
- window.bridge.getDouble(20)

参考资料：h5 与原生 app 交互的原理

构建 Native 与非 Native 间音讯通信的双向通道，使得 H5 与 app 能够相互调用各自的办法

案例：

微信 sdk (微信内获取用户 openID，调起微信领取性能，分享性能)

实现原理：

一、注入 API

前端间接调用

//android 4.2+ 零碎劫持
window.nativeBridge.postMessage(message);  //android webview 提供了 addJavascriptInterface 的办法

//ios 有新老两个容器
//UIWebview (过期了)，WKWebview(举荐)
window.webkit.messageHandlers.share.postMessage(xxx);  //WKWebViewConfiguration 的调用办法

二、拦挡 URL scheme

ydl-user://[ceshi](haoshi://ceshi/home)/list

参考资料:

JSBridge 的原理

微信凋谢文档

小白必看，JSBridge 初探

关于面试:前端面试宝典移动端核心知识篇

前言：

挪动端

挪动端高清屏适配计划？

挪动端尺寸单位？

事件穿透的原理及解决方案？

高清屏 1px 边框问题的解决方案？

浏览器有哪些兼容些问题，你是如何解决的？

挪动端兼容性问题？

事件穿透的原理及解决方案？

H5 与原生 APP 交互的原理？

JSBridge 原理？