====== Mobile Web Develop ======

{{tag>web javascript css mobile}}

该页面记录移动web开发过程中遇到的各种坑

===== Flexbox =====

因Android4.4-只支持旧版Flexbox标准，因此在移动端中使用''Flexbox''需要配置[[https://autoprefixer.github.io/|autoprefixer]]

  browsers: ['Android >= 4.0', 'iOS >= 7']

==== 兼容性 ====

**影响范围**：Android4.0 - Android4.3

[[http://caniuse.com/#search=flexbox|flexbox浏览器兼容性]]

Android4.4-不支持''flex-wrap''特性，没有workaround，需要用到wrap特性的地方都需要换成''inline-block''实现

==== display:flex元素下的子元素须为块级元素 ====


**影响范围**：Android4.0 - Android4.3

display:flex元素下的子元素都要为块级元素，否则''display: flex''不会生效，将会表现为行内元素的特性

例子如下：

<code html>
<template>
  <div class="flex">
    <!-- broken on android4.4- -->
    <span class="name">name</span>
    <img class="avatar" />
  </div>
</template>
<style>
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
</code>

===== Babel =====

**影响范围**：Android4.0 - Android 4.2(or 4.3?)

目前移动端代码都用''ECMAScript 2015''编写，再使用[[http://babeljs.io/|Babel]]编译为''es5''，然而常用的[[https://babeljs.io/docs/plugins/preset-es2015/|es2015 preset]]在创建模块时默认添加了''%%__%%esModule''属性

  Object.defineProperty(exports, '__esModule', {value: true});

所以会导致报错：

  Cannot assign to read only property ‘__esModule’

**解决方法**：

使用''loose''模式，安装''es2015-loose''包

  npm i babel-preset-es2015 babel-preset-es2015-loose
  sed -i 's|es2015|es2015-loose|g' ./.babelrc

<WRAP center help 80%>
Loose模式的意思即为对''es2015''语法实现不严格，例如仅仅将块级作用域的''let'', ''const''转换为''var''
</WRAP>

===== Font Boosting =====

重现条件：使用[[https://github.com/imweb/mobile/issues/3|rem]]方案

**影响范围**：理论上所有webkit内核的移动浏览器

表现：在Chrome上看到的字体比手机上看到的要大（注意，不是Chrome浏览器默认配置最小12px字体的问题）

原理：[[https://github.com/amfe/article/issues/10|Font Boosting]]

解决方法：在字体容器上设置''max-height: 100%''

===== Input Appearance =====

**影响范围：** safari （当前版本为iOS 10）

在 ''safari'' 上想要覆盖 ''input'' 组件的样式，记得加上 ''-webkit-appearance: none;'' ，否则会有safari的默认样式样式导致实际效果和设计图出入较大。

<code css>
input {
  -webkit-appearance: none;
  appearance: none;
}
</code>

想要隐藏掉 ''textarea'' 右下角的角标，可用 ''resize'' 禁用掉调整大小的功能：

<code css>
textarea.textarea {
  resize: none;
}
</code>

===== Safari border-radius =====

**影响范围：** safari （当前版本为iOS 10）

如想设单边 ''border-radius''，在 ''safari'' 上可能会出现四个角都有 ''border-radius'' 的情况，所以最好声明另外一边的 ''border-radius'' 为0:

<code css>
.right {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 0;    /* required */
  border-bottom-left-radius: 0;    /* required */
}

.left {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 0;    /* required */
  border-bottom-left-radius: 0;    /* required */
}
</code>

===== :empty selector =====

**影响范围：** Android 4.0-4.2

用 ''p:empty'' 选择器来隐藏掉部分空元素时把有内容的元素都隐藏了

示例代码：

<code html>
<div class="content">
  <p>First line<br />
second line<br />
third line</p>
</div>
</code>

===== Debug on UC Browser =====

Install UC developer version: http://plus.uc.cn/document/webapp/doc5.html

First, enable Android adb debug mode. Then open ''chrome:\/\/inspect'' and allow permission on mobile, finally inspect the browser.

===== iPhone X 适配 =====

在 iPhone X 系列全面屏手机会出现下图底部操作栏覆盖掉 Tabbar 的情况

{{ :frontend:iphone-x-failed.png?400 }}

适配步骤为：

1. 在 ''viewport'' 添加 ''viewport-fit=cover''

2. 给 Tabbar 添加 ''padding-bottom''

<code css>
.tabbar {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</code>

3. 检查所有页面的元素，通过 ''@supports'' 特性检测给所有 fixed bottom 布局的元素添加额外的 ''padding-bottom'' / ''margin-bottom''

<code css>
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  div {
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
  }
}
</code>

===== 微信点击漂移 =====

**影响范围**：**iOS 微信端**

复现条件：点击 input 输入东西后，弹出弹窗确认（fixed 布局），弹窗的按钮不好点或者出现点击漂移。

讨论链接：[[http://html51.com/info-59028-1/|微信打开网页键盘弹起后页面上滑，导致弹框里的按钮响应区域错位]]

**解决方案：**

这是因为微信弹出输入法时顶开了整个页面，可以在最后一个 input blur 的时候强制页面滚动到页面顶部或者底部。

<code javascript>
input.addEventListener('blur', function () {
  window.scrollTo(0, 0);
});
</code>

===== Reference =====

  * [[https://www.zhihu.com/question/34556725|在做 iOS 和 Android 的 HTML5 开发时，你都掉到过哪些坑里？]]