1.1-移动端适配

Create by fall on 09 Jun 2022 Recently revised in 04 Apr 2023

移动端适配

在移动端虽然整体来说大部分浏览器内核都是 webkit，而且大部分都支持 css3 的所有语法。但是，由于手机屏幕尺寸不一样，分辨率不一样，或者你需要考虑横竖屏的问题，或者考虑到各式各样的移动端兼容性问题。

像素大小

设备像素（设备分辨率）：手机的物理像素分辨率，和显示器有关，设备像素和设备分辨率由操作系统控制并管理。

逻辑分辨率（设备独立像素、逻辑像素）：逻辑分辨率用屏幕的 width * height 来表示（单位：设备独立像素）

CSS 像素：不会随着设备的变化而变化，是固定的，如果进行放大，放大的是 CSS展示比例，像素大小不会随之改变。

屏幕的设备分辨率是 1920*1200（单位：设备像素）我们可以在当前的分辨率下设置逻辑分辨率是1280*800（单位：设备独立像素）

css 像素与设备独立像素的关系

在缩放比例为 100% 的情况下，1 个 css 像素大小等于 1*1 个设备独立像素；缩放比例为 200% 的情况下，1 css 像素等于 2*2 个像素。

css 像素与设备像素的关系

window.devicePixelRatio 获取设备像素比（同一直线上，设备像素的数量 / CSS 像素的数量）。

如果 devicePixelRatio = 2，表示设备像素的数量是 CSS 像素数量的 2 倍

viewport

layout viewport：布局窗口，即 html 元素的父容器，有时会无法展示出 layout viewport 全貌，但数据确实加载上了，这时候会出现滚动条

visual viewport：视觉窗口，显示出 layout viewport 的那一部分。

ideal viewport：理想视口，最适合移动设备的 viewport。只要在 css 中把某一元素的宽度设为 ideal viewport 的宽度(单位用 px )，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100% 的效果。

对 viewport 进行控制

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- 该 meta 标签的作用是让当前 viewport 的宽度等于设备的宽度，同时不允许用户手动缩放。 -->

属性	值
initial-scale	允许用户的最小缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最大缩放值，为一个数字，可以带小数
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes 代表允许

适配方案

media

@media 页面上所有的元素都得在不同的 @media 中定义一遍不同的尺寸

@media only screen and (min-width: 375px) {
  .logo {width : 62.5px;}
}
@media only screen and (min-width: 360px) {
  .logo {width : 60px;}
}
@media only screen and (min-width: 320px) {
  .logo {    width : 53.3333px;  }
}

rem

rem（font size of the root element）根元素的字体大小，如果设置 html 字体大小为 16px 之后，只需设置字体为 1rem 即可，虽然仍需要 @media 为不同大小的设备进行设置，但减少了很多操作。

@media only screen and (min-width: 375px) {
  html {    font-size : 375px;}
}
@media only screen and (min-width: 360px) {
  html {font-size : 360px;}
}
//定义方法：calc
@function calc($val){
  @return $val / 1080;
}
.logo{
  width : calc(180rem);
}

flexible

使用 js 动态来设置根字体

// set 1rem = viewWidth / 10
function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
}
setRemUnit();

由于其缩放的缘故，video 标签的视频频播放器的样式在不同 dpr 的设备上展示差异很大；

viewport

因为每个屏幕的百分比是固定的、可预测、可控制的。

vw：是 viewport's width 的简写，1vw 等于 window.innerWidth 的 1%；
vh：是 viewport's height 的简写，1vh 等于 window.innerHeihgt 的 1%；
vmin、vmax：vmin 的值是当前 window.innerWidth 和 window.innerWidth 中较小的值，vmax 的值是较大的值

利用 PostCSS 减少计算，自动将 px 计算为 vw

npm install postcss-px-to-viewport --save-dev

因为会自动进行转换，当不需要转换时，使用下面的注释

.class {
  /* px-to-viewport-ignore-next */
  width: 10px;
  padding: 10px;
  height: 10px; /* px-to-viewport-ignore */
}

会解析如下内容

.class {
  width: 10px; 
  padding: 3.125vw;
  height: 10px;
}

Retina （视网膜屏）屏场景，可能对图片的高清程度、1px 等场景有需求，所以我们预留判断 Retina 屏坑位。

// index.html 文件
const dpr = devicePixelRatio >= 3? 3: devicePixelRatio >= 2? 2: 1;
document.documentElement.setAttribute('data-dpr', dpr);

控制viewport

移动端直接控制 meta 中的 content 描述即可控制 viewport

<meta id="vp" name="viewport" content="width=750,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
<script>
var w1=window.innerWidth,scale=w1/750*0.5;
document.getElementById('vp').content='width=750,initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no';
</script>

常见问题

1px

我们直接写 css 的大小 1px，那在 dpr = 2 时，则等于 2px 设备像素，dpr = 3 时，等于 3px 设备像素。

解决方案：

.calss1 {
  position: relative;
  &::after {
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-top:1px solid #666;
    transform: scaleY(0.5);
  }
}

图片不清晰

普通屏幕的图片在视网膜屏幕下，会出现模糊的情况，

如果全部应用高清图，浪费带宽，如果全部应用普通图，无法保证清晰，通过下面的方法实现适配

[data-dpr="1"] .hello {
  background-image: url(image@1x.jpg);
[data-dpr="2"] .hello {
  background-image: url(image@2x.jpg);
}
[data-dpr="3"] .hello {
  background-image: url(image@3x.jpg);
}

安全区域

比如说因为曲面屏，因为屏幕下方的一条导航栏，导致最下方的数据和菜单被遮挡，所以采用安全区域，进行设置margin

iphone 的 meta 标签中，viewport添加了新的内容，可设置三个值

contain：可视窗口完全包含网页内容
cover：网页内容完全覆盖可视窗口
auto：默认值，跟 contain 表现一致

插件

一般来讲，插件都是 postcss 插件，来处理 css

postcss-pxtorem

npm install postcss-pxtorem --save

vue 项目中，通过 vue.config.js 中添加以下内容，对该插件进行配置

const postToRem = require('postcss-pxtorem')({ // 把px单位换算成rem单位
  rootValue: 16, // 初始根元素大小（换算基数） 
  unitPrecision: 3, //允许 REM 单位增长到的十进制数字，小数点后保留的位数。
  propList: ['*'], // 需要从 px 转化为 rem 的属性，如：height,font-size 之类，或者通配符 *
  exclude: /(node_module)/,
  selectorBlackList: ['.van'],// 选择器白名单
  mediaQuery: false,  // 是否允许在 f12 查询中转换px，默认为false。
  minPixelValue: 1 //设置要替换的最小像素值
})
module.exports={
  css: {
    loaderOptions: {
      postcss: {
        plugins: [postToRem]
      }
    }
  }
}

随窗口变化

// 基准大小
const baseSize = 37.5
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

参考文章

作者	链接
我是你的超级英雄	https://juejin.cn/post/7046169975706353701
MK麦客	https://juejin.cn/post/7096367751626752008

1.2 移动端适配方案

参考答案：

适配思路

设计稿（750*1334） ---> 开发 ---> 适配不同的手机屏幕，使其显得合理

原则

开发时方便，写代码时设置的值要和标注的 160px 相关
方案要适配大多数手机屏幕，并且无 BUG
用户体验要好，页面看着没有不适感

思路

写页面时，按照设计稿写固定宽度，最后再统一缩放处理，在不同手机上都能用
按照设计稿的标准开发页面，在手机上部分内容根据屏幕宽度等比缩放，部分内容按需要变化，需要缩放的元素使用 rem, vw 相对单位，不需要缩放的使用 px
固定尺寸+弹性布局，不需要缩放

viewport 适配

根据设计稿标准（750px 宽度）开发页面，写完后页面及元素自动缩小，适配 375 宽度的屏幕

在 head 里设置如下代码

<meta name="viewport" content="width=750,initial-scale=0.5">

initial-scale = 屏幕的宽度 / 设计稿的宽度

为了适配其他屏幕，需要动态的设置 initial-scale 的值

<head>
  <script>
    const WIDTH = 750
    const mobileAdapter = () => {
      let scale = screen.width / WIDTH
      let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
      let meta = document.querySelector('meta[name=viewport]')
      if (!meta) {
        meta = document.createElement('meta')
        meta.setAttribute('name', 'viewport')
        document.head.appendChild(meta)
      }
      meta.setAttribute('content',content)
    }
    mobileAdapter()
    window.onorientationchange = mobileAdapter //屏幕翻转时再次执行
  </script>
</head>

缺点就是边线问题，不同尺寸下，边线的粗细是不一样的（等比缩放后），全部元素都是等比缩放，实际显示效果可能不太好

vw 适配（部分等比缩放）

开发者拿到设计稿（假设设计稿尺寸为750px，设计稿的元素标注是基于此宽度标注）
开始开发，对设计稿的标注进行转换，把px换成vw。比如页面元素字体标注的大小是32px，换成vw为 (100/750)*32 vw
对于需要等比缩放的元素，CSS使用转换后的单位
对于不需要缩放的元素，比如边框阴影，使用固定单位px

关于换算，为了开发方便，利用自定义属性，CSS变量

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
  <script>
    const WIDTH = 750
    //:root { --width: 0.133333 } 1像素等于多少 vw
    document.documentElement.style.setProperty('--width', (100 / WIDTH)) 
  </script>
</head>

注意此时，meta 里就不要去设置缩放了

业务代码里就可以写

header {
  font-size: calc(28vw * var(--width))
}

实现了按需缩放

rem 适配

开发者拿到设计稿（假设设计稿尺寸为750px，设计稿的元素标是基于此宽度标注）
开始开发，对设计稿的标注进行转换
对于需要等比缩放的元素，CSS使用转换后的单位
对于不需要缩放的元素，比如边框阴影，使用固定单位px

假设设计稿的某个字体大小是 40px, 手机屏幕上的字体大小应为 420/750*40 = 22.4px (体验好)，换算成 rem（相对于 html 根节点，假设 html 的 font-size = 100px,）则这个字体大小为 0.224 rem

写样式时，对应的字体设置为 0.224 rem 即可，其他元素尺寸也做换算...

但是有问题

举个，设计稿的标注是40px，写页面时还得去做计算，很麻烦（全部都要计算）

能不能规定一下，看到 40px ,就应该写 40/100 = 0.4 rem,这样看到就知道写多少了（不用计算），此时的 html 的 font-size 就不能是 100px 了，应该为 (420*100)/750 = 56px，100为我们要规定的那个参数

根据不同屏幕宽度，设置 html 的 font-size 值

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
  <script>
    const WIDTH = 750 //设计稿尺寸
    const setView = () => {
      document.documentElement.style.fontSize = (100 * screen.width / WIDTH) + 'px'
    }
    window.onorientationchange = setView
    setView()
  </script>
</head>

对于需要等比缩放的元素，CSS使用转换后的单位

header {
  font-size: .28rem;
}

对于不需要缩放的元素，比如边框阴影，使用固定单位px

header > span.active {
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
}

假设 html 的 font size = 1px 的话，就可以写 28 rem 了，更方便了，但是浏览器对字体大小有限制，设为 1px 的话，在浏览器中是失效的，会以 12px（或者其他值）做一个计算 , 就会得到一个很夸张的结果，所以可以把 html 写的大一些

使用 sass 库时

JS 处理还是一样的，但看着好看些

@function px2rem($px) {
  @return $px * 1rem / 100;
}

header {
  font-size: px2rem(28);
}

以上的三种适配方案，都是等比缩放，放到 ipad 上时（设计稿以手机屏幕设计的），页面元素会很大很丑，有些场景下，并不需要页面整体缩放（viewport 自动处理的也很好了），所以有时只需要合理的布局即可。

弹性盒适配（合理布局）

<meta name="viewport" content="width=device-width">

使用 flex 布局

section {
  display: flex;
}

总结一下，什么样的页面需要做适配（等比缩放）呢

页面中的布局是栅格化的

换了屏幕后，到底有多宽多高很难去做设置，整体的都需要改变，所以需要整体的缩放

头屏大图，宽度自适应，高度固定的话，对于不同的屏幕，形状就会发生改变（放到ipad上就变成长条了），宽度变化后，高度也要保持等比例变化

以上所有的适配都是宽度的适配，但是在某些场景下，也会出现高度的适配

比如大屏，需要适配很多的电视尺寸，要求撑满屏幕，不能有滚动条，此时若换个屏幕

此时需要考虑小元素用 vh, 宽和高都用 vh 去表示，中间的大块去自适应，这就做到了大屏的适配，屏幕变小了，整体变小了（体验更好），中间这块撑满了屏幕

对于更复杂的场景，需要更灵活考虑，没有一种适配方式可以囊括所有场景。

2.2 开发APP的技术栈是怎么样的

参考答案：

手机 App 的技术栈可以分成三类：原生 App 技术栈 （native technology stack）、混合 App 技术栈 （hybrid technology stack）、跨平台 App 技术栈 （cross-platform technology stack），H5 开发主要用在混合技术栈。但是，跨平台技术栈的某些容器也会用到（比如 React Native），因为它们的 UI 层借鉴了 Web 模型。混合技术栈和跨平台技术栈的基础，都是原生技术栈，因为最终都要编译成原生App。所以，不管使用哪一种技术栈，多多少少要了解一些各平台的原生技术。

解析：

（1）原生 App 技术栈 （native technology stack）

原生技术栈指的是，只能用于特定手机平台的开发技术。比如，安卓平台的 Java 技术栈，iOS 平台的 Object-C 技术栈或 Swift 技术栈。

这种技术栈只能用在一个平台，不能跨平台。

（2）混合 App 技术栈 （hybrid technology stack）

混合技术栈指的是开发混合 App 的技术，也就是把 Web 网页放到特定的容器中，然后再打包成各个平台的原生 App。所以，混合技术栈其实是 Web 技术栈 + 容器技术栈，典型代表是 PhoneGap、Cordova、Ionic 等框架。

如果已经掌握了 Web 技术，这个技术栈就主要学习容器提供的 API Bridge，网页通过它们去调用底层硬件的 API。

（3）跨平台 App 技术栈 （cross-platform technology stack）

跨平台技术栈指的是使用一种技术，同时支持多个手机平台。它与混合技术栈的区别是，不使用 Web 技术，即它的页面不是 HTML5 页面，而是使用自己的语法写的 UI 层，然后编译成各平台的原生 App。

这个技术栈就是纯粹的容器技术栈，React Native、Xamarin、Flutter 都属于这一类。学习时，除了学习容器的 API Bridge，还要学习容器提供的 UI 层，即怎么写页面。

WebView 控件

讲解具体的技术栈之前，大家需要知道，不管什么技术，最终在 App 里面显示网页，一定需要一个网页引擎，这样才能解析网页。

通常情况下，App 内部会使用 WebView 控件作为网页引擎。这是系统自带的控件，专门用来显示网页。应用程序的界面，只要放上 WebView，就好像内嵌了浏览器窗口，可以显示网页。

不同的 App 技术栈要显示网页，区别仅仅在于怎么处理 WebView 这个原生控件。

原生技术栈：需要开发者自己把 WebView 控件放到页面上。

混合技术栈：页面本身就是网页，默认在 WebView 中显示。

跨平台技术栈：提供一个 WebView 的语法，编译的时候将其换成原生的 WebView。

注意，不同系统的 WebView 控件名称不一样，安卓系统就叫 WebView，iOS 系统有较老的 UIWebView，也有较新的 WKWebView，作用都是一样的，差异在于功能的强弱。

原生技术栈

原生技术栈分成 iOS 和安卓两个平台。

简单说，iOS 的原生技术栈就是使用 Object-C 语言或 Swift 语言，在 Xcode 开发环境中编程。安卓的原生技术栈，则是使用 Java 语言或 Kotlin 语言，开发环境是 Android Studio。

混合技术栈

上面的原生技术栈需要自己新建 WebView 实例，相比之下，混合技术栈就简单多了。因为页面就是网页，所以容器已经设置好了 WebView，开发者直接写页面即可。

框架种类

混合技术栈的各种容器框架之中，历史最悠久是 PhoneGap，诞生于2009年。后来在2011年被 Adobe 公司收购，改名为 Adobe PhoneGap。

Adobe 公司将 PhoneGap 的核心代码，后来都捐给了 Apache 基金会，作为一个全新的开源项目，名为 Apache Cordova。

PhoneGap 和 Cordova 现在是两个独立发展的开源项目，但是彼此有密切的关系，可以简单理解成 Cordova 是 PhoneGap 的内核，PhoneGap 是 Cordova 的发行版。

后来，其他人也开始基于 Cordova 封装自己的框架，所以市场上有许多基于 Cordova 的开源框架，比较著名的有 Ionic、Monaca、Framework7 等。

所有这些框架的共同点，都是使用 Web 技术（HTML5 + CSS + JavaScript）开发页面，再由框架分别打包成 iOS 和安卓的 App 安装包。它们的优点是开发简单、周期短、成本低，缺点是功能和性能都很有限。

跨平台技术栈

上面的混合技术栈使用 HTML 语言编写页面，再用 WebView 控件加载页面，所以只写一次页面，就能支持多个平台。跨平台技术栈也能做到多平台支持，但是原理完全不同。

跨平台技术栈的框架，都是使用自己的语法编写页面，不使用 Web 技术，编译的时候再将其转为原生控件，或者使用自己的底层控件，生成原生 App。这样就完全解决了 Web 页面性能不佳的问题。下面介绍三个这样的框架。

React Native: 使用 JavaScipt 语言编写页面

Xamarin：使用 C# 语言编写页面

Flutter：使用 Dart 语言编写页面

React Native

（1）原理

2013年， Facebook 公司发布了 React 框架。这个框架是为网页开发设计的，核心思想是在网页之上，建立一个 UI 的抽象层，所有数据操作都在这个抽象层完成（即在内存里面完成），然后再渲染成网页的 DOM 结构，这样就提升了性能。

很快，工程师们就意识到了，UI 抽象层本质上是一种数据结构，与底层设备无关，不仅可以渲染成网页，也可以渲染成手机的原生页面。这样的话，只要写一次 React 页面，就能分别编译成 iOS 和安卓的原生 App。这就是 React Native 项目的由来。

注意，React Native 虽然也使用 JavaScript 语言，并且写法看上去像 Web 页面，但其实所有控件都是自己定义的，编译时再一一翻译为对应的原生控件。举例来说，React Native 的文本渲染控件是，翻译成 iOS 控件为 UIView，翻译成安卓控件为TextView。这种做即保证了性能，又做到了跨平台支持，所以一诞生就引起开发者的关注，成了热门技术。

还有一个 NativeScript 框架，跟 React Native 很像，也是使用 JavaScript 语言，然后编译成原生控件。不过，它的开发模型是基于 Angular.js，而不是 React。

（2）React Native 的问题

React Native 的想法虽然很美好，但是实际开发中出现了各种各样的问题。

最主要的一个问题是， UI 抽象层翻译出来的 iOS 和安卓原生页面，做不到完全一致，尤其是复杂页面，样式或功能存在差异。编译出来两个平台的原生 App 往往是一个正常，另一个会出现各种奇怪的小毛病。ReactNative 的底层还是没有做到无缝适配，它至今没有发布 1.0 版（2019年底是 0.61 版），这多多少少也说明了一些题。

如果你想用 React Native 做到 iOS 和安卓体验一致，并且充分发挥原生控件的功能，就需要同时熟悉 React Native、iOS、安卓三个平台，这对开发者的要求实在太高了。Airbnb 公司在使用 React Native 两年后，宣布放弃，改用原生技术栈。

Xamarin

Xamarin 是微软公司的跨平台 App 开发框架，原理跟 React Native 很相似，只不过它的语言是 C#。

它的使用需要 Visual Studio，这里就不举例了。
Flutter

Flutter 是谷歌公司最新的跨平台开发框架。它为了解决 React Native 的平台差异问题，采用了一个完全不同的方案。

它自己实现了一套控件。打包的时候，会把这套控件打包进每一个 App，因此不存在调用原生控件的问题。不管什么平台，都调用内嵌的自己那套控件，就能做到 iOS 和安卓体验完全一致。

Flutter 历史还不长，应用还不广泛，API 也没稳定下来。但是很值得关注。

它是 Flutter 的官方语言，接近 JavaScript 语法，但是多了静态类型支持。

2.3 描述一下移动端跨平台

参考答案：

跨平台开发的目的

线上动态性，不需要频繁更新版本即可实现新业务的上线；
增加代码复用，减少开发者对多个平台差异适配的工作量，解决多端不一致的问题；
提高业务专注的同时，提供比web更好的体验；
降低开发成本.

跨平台开发流派

Web 流：也被称为 Hybrid 技术，它基于 Web 相关技术来实现界面及功能 Cordova，AppCan，小程序，快应用
代码转换流：将某个语言转成 Objective-C、Java 或 C#，然后使用不同平台下的官方工具来开发 java2OC，OC2Java，java2C#
编译流：将某个语言编译为二进制文件，生成动态库或打包成 apk/ipa/xap 文件 Xamarin
虚拟机流：通过将某个语言的虚拟机移植到不同平台上来运行 Flutter，Titanium，React Native，Weex

跨平台开发主流技术

Flutter（Google）
ReactNative（FaceBook）
Weex（Alibaba）
Hybrid App
Cordova（原PhoneGap，Adobe）（）
小程序，快应用

比较

解决方案	ReactNative	Weex	Flutter	Hybrid App
平台实现	JavaScript	JavaScript	无桥接，原生编码	无桥接，原生编码
引擎	JSCore	JS V8	Flutter engine	原生渲染
核心语言	React	Vue	Dart	Java/Obeject-C
Apk大小（Release）	7.6M	10.6M	8.1M
bundle文件大小	默认单一，较大	较小，多页面可多文件	不需要	不需要
上手难度（原生角度）	较高	一般	一般	容易
框架程度	较重	较轻	重	-
特点	适合开发整体App	适合单页面	适合开发整体App	适合开发整体App
社区	丰富，FaceBook重点维护	有点残念，托管apache	刚出道小鲜肉，拥护者众多	丰富
线上动态性	✅	✅	❎	❎
跨平台支持	Android、iOS	Android、iOS、Web	Android、iOS	Android、iOS

解析：

Flutter

闲鱼、美团，饿了么、NOW直播（腾讯）、京东金融

Flutter是谷歌的最新移动UI框架。

优点

热重载（Hot Reload），利用Android Studio直接一个ctrl+s就可以保存并重载，模拟器立马就可以看见效果，相比原生冗长的编译过程强很多；
一切皆为Widget的理念，对于Flutter来说，手机应用里的所有东西都是Widget，通过可组合的空间集合、丰富的动画库以及分层课扩展的架构实现了富有感染力的灵活界面设计；
借助可移植的GPU加速的渲染引擎以及高性能本地代码运行时以达到跨平台设备的高质量用户体验。简单来说就是：最终结果就是利用Flutter构建的应用在运行效率上会和原生应用差不多。

缺点

不支持热更新；
三方库很少，需要自己造轮子；
dart语言编写，掌握该语言的开发者很少。

React Native

墨刀，京东，手机百度 ,腾讯QQ，QQ空间，Facebook及旗下应用

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架

优点

效率体验接近原生应用质量，发布和开发成本低于原生App；
支持热更新，快速迭代；
社区活跃，基本坑点都能解决；
代码跨越双平台

缺点

RN 的开源库质量不可靠；
RN 运行时的初始化太慢，首次渲染时间慢（需要从主线程 -> JS -> Yoga -> 主线程）；
调试困难，JSCore 在 iOS / Android 上不一致（Android 上是 RN 自己 bundle 的），很难 debug 这种坑

WEEX

淘宝，天猫，支付宝，网易考拉，网易严选

2016年4月21日，阿里巴巴在Qcon大会上宣布跨平台移动开发工具Weex。

优点

单页开发模式效率极高，热更新发包体积小，并且跨平台性更强

缺点

社区没有RN活跃，功能尚不健全，暂不适合完全使用Weex开发App

Hybrid App（Android/iOS+Html5）

微信，爱奇艺，我爱我家

Hybrid App主要以JS+Native两者相互调用为主，从开发层面实现“一次开发，多处运行”的机制，成为真正适合跨平台的开发

优点

兼具了Native App良好用户体验的优势；
提升了开发效率，h5可以多平台复用，由服务器快速迭代；
实现简单，且原生与h5开发人员充沛。

缺点

体验比不上原生,webView性能差；
适用部分展示页面，复杂交互仍需要原生开发；
需要对应平台人员配合，jsApi因需求需要调整，版本迭代并不自由.

2.4 谈谈移动端点击

参考答案：

移动端 300 ms 点击（click 事件）延迟

由于移动端会有双击缩放的这个操作，因此浏览器在 click 之后要等待 300ms，判断这次操作是不是双击。

解决方案：

禁用缩放：user-scalable=no
更改默认的视口宽度
CSS touch-action

点击穿透问题

因为 click 事件的 300ms 延迟问题，所以有可能会在某些情况触发多次事件。

解决方案：

只用 touch
只用 click

2.5 什么是响应式开发？

参考答案：

响应式开发是前端开发工作比较常见的工作内容，随着移动互联网的发展，移动端设计越来越重要，很多项目都是移动端项目先开发，而后是PC端的开发，为了降低运营成本和开发成本，同一个网站要能兼容PC端和移动端显示呼之欲出，进而响应式开发成了前端开发人员必备的技能，所以响应式开发的技术必须掌握。

什么是响应式

顾名思义，同一个网站兼容不同的大小的设备。如PC端、移动端（平板、横屏、竖排）的显示风格。

需要用到的技术

Media Query（媒体查询）

用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸，是否可触摸，屏幕精度，横屏竖屏等信息。

使用em或rem做尺寸单位

用于文字大小的响应和弹性布局。

禁止页面缩放

<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />
复制代码

屏幕尺寸响应

a) 固定布局：页面居中，两边留白，他能适应大于某个值一定范围的宽度，但是如果太宽就会有很多留白，太窄会出现滚动条，在PC页面上很常见。

b) 流动布局：屏幕尺寸在一定范围内变化时，不改变模块布局，只改变模块尺寸比例。比固定布局更具响应能力，两边不留白，但是也只能适应有限的宽度变化范围，否则模块会被挤（拉）得不成样子。

c) 自定义布局：上面几种布局方式都无法跨域大尺寸变化，所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。

d) 栅格布局：这种布局方式使得模块之间非常容易对齐，易于模块位置的改变用于辅助自定义布局。

响应式设计注意事项

1.宽度不固定，可以使用百分比

#head{width:100%;}
#content{width:50%;}

图片处理

图片的宽度和高度设置等比缩放，可以设置图片的width为百分比，height:auto;

背景图片可以使用background-size 指定背景图片的大小。

移动端适配​

像素大小​

viewport​

适配方案​

media​

rem​

flexible​

viewport​

控制viewport​

常见问题​

1px​

图片不清晰​

安全区域​

插件​

postcss-pxtorem​

随窗口变化​

参考文章​

1.2 移动端适配方案​

2.2 开发APP的技术栈是怎么样的​

2.3 描述一下移动端跨平台​

2.4 谈谈移动端点击​

2.5 什么是响应式开发？​

移动端适配

像素大小

viewport

适配方案

media

rem

flexible

viewport

控制viewport

常见问题

1px

图片不清晰

安全区域

插件

postcss-pxtorem

随窗口变化

参考文章

1.2 移动端适配方案

2.2 开发APP的技术栈是怎么样的

2.3 描述一下移动端跨平台

2.4 谈谈移动端点击

2.5 什么是响应式开发？