# 移动端

\[TOC]

## 移动端高清屏适配方案？

几个要解决的重要问题：

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

参考资料：

[移动端高清屏适配方案](https://juejin.cn/post/6844903457892073479)

## 移动端尺寸单位？

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

参考资料：

[css单位中px和em,rem的区别](https://zhuanlan.zhihu.com/p/28915418)

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

原理 ：

* 300ms延迟问题，事件穿透了（可跨页面）

解决方案：

* 不要混用touch,click， touch300ms会触发click
* tap后延迟350ms再隐藏mask，消除掉touch之后的click （tap后延迟350毫秒再隐藏mask）
* 第三方插件fastclick

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

* 伪类+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; }
```

## 浏览器有哪些兼容些问题，你是如何处理的？

1. html5的兼容性可以使用htmlshiv.js来处理（可以兼容到ie6-ie8）
2. css3 新特性，单独增加前缀（可以使用postcss的插件 Autoprefixer）;  IE条件注释
3. 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

## H5与原生APP交互的原理？

**一、APP调用H5**

> 【不建议使用】app做为容器，尽量不要去调用H5的方法，这样会导致数据流混乱，APP webview容器不能做到模块化

步骤

1. h5中暴露一些全局对象, 把变量，方法注入到window对象下
2. app中调用这些对象

**二、H5调用APP**

> 由于h5不能直接访问宿主APP，所以这种调用相对复杂一点

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

优点：简单

缺点：可能存在安全隐患,android系统

H5中直接调用：

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

![img](https://segmentfault.com/img/bVbit5e?w=1006\&h=353)

**2）H5发起一个自定义协议请求**

> scheme协议，app的一种页面跳转协议

步骤：

1. 【定协议】app自定义协议
   * ydl-user://[ceshi](haoshi://ceshi/home)/list   跳转到【原生】测评列表页
   * ydl-user://h5/test?params={"url":" <http://www.x.com/ceshi/1>"}    //跳转到【H5】测评详情页，params 参数部分 使用UrlEncode编码 且不能有空格
2. 【定回调】h5定义好回调函数
   * window\.bridge={getDouble:value=>{}, getTriple:value=>{}}
3. 【发请求】H5发起一个自定义协议请求，
   * location.href = 'sdk://double?value=10'
4. 【拦截并解析请求】app拦截这个请求，进行相应操作，获取返回值
5. 【调方法】由app调用h5中的回调函数，
   * window\.bridge.getDouble(20)

![img](https://segmentfault.com/img/bVbit5f?w=977\&h=338)

参考资料： [h5 与原生 app 交互的原理](https://segmentfault.com/a/1190000016759517)

## JSBridge 原理？

> 构建Native与非Native间消息通信的双向通道，使得H5与app可以互相调用各自的方法

案例：

* 微信sdk (微信内获取用户openID，调起微信支付功能，分享功能)

**实现原理：**

**一、注入API**

前端直接调用

```javascript
//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的原理](https://juejin.cn/post/6844903585268891662#heading-1)

[微信开放文档](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#2)

[小白必看，JSBridge 初探](https://www.zoo.team/article/jsbridge)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://xz-fe-interview.gitbook.io/fe-interview/mobile.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.