用户工具

站点工具


frontend:mobile

Mobile Web Develop

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

Flexbox

因Android4.4-只支持旧版Flexbox标准,因此在移动端中使用Flexbox需要配置autoprefixer

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

兼容性

影响范围:Android4.0 - Android4.3

flexbox浏览器兼容性

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

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

影响范围:Android4.0 - Android4.3

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

例子如下:

<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>

Babel

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

目前移动端代码都用ECMAScript 2015编写,再使用Babel编译为es5,然而常用的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

Loose模式的意思即为对es2015语法实现不严格,例如仅仅将块级作用域的let, const转换为var

Font Boosting

重现条件:使用rem方案

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

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

原理:Font Boosting

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

Input Appearance

影响范围: safari (当前版本为iOS 10)

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

input {
  -webkit-appearance: none;
  appearance: none;
}

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

textarea.textarea {
  resize: none;
}

Safari border-radius

影响范围: safari (当前版本为iOS 10)

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

.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 */
}

:empty selector

影响范围: Android 4.0-4.2

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

示例代码:

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

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 的情况

适配步骤为:

1. 在 viewport 添加 viewport-fit=cover

2. 给 Tabbar 添加 padding-bottom

.tabbar {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

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

@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);
  }
}

微信点击漂移

影响范围iOS 微信端

复现条件:点击 input 输入东西后,弹出弹窗确认(fixed 布局),弹窗的按钮不好点或者出现点击漂移。

讨论链接:微信打开网页键盘弹起后页面上滑,导致弹框里的按钮响应区域错位

解决方案:

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

input.addEventListener('blur', function () {
  window.scrollTo(0, 0);
});

Reference

frontend/mobile.txt · 最后更改: 2023/12/03 10:24 由 127.0.0.1