−目录
Mobile Web Develop
该页面记录移动web开发过程中遇到的各种坑
Flexbox
因Android4.4-只支持旧版Flexbox标准,因此在移动端中使用Flexbox
需要配置autoprefixer
browsers: ['Android >= 4.0', 'iOS >= 7']
兼容性
影响范围:Android4.0 - Android4.3
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字体的问题)
解决方法:在字体容器上设置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); });