移动端合集

发表于 分类于 阅读次数：

跨平台调试

  • Vconsole

  • Eruda

  • window下调试 iOS-Safari

    实现真机调试主要是使用了 remotedebug-ios-webkit-adapter

    1
    2
    3
    4
    安装scoopeWindows 命令行安装工具

    Set-ExecutionPolicy RemoteSigned -scope CurrentUser
    iex (new-object net.webclient).downloadstring('https://get.scoop.sh')
    1
    2
    3
    4
    5
    scoop bucket add extras
    scoop install ios-webkit-debug-proxy
    npm install -g vs-libimobile

    npm install remotedebug-ios-webkit-adapter -g
    1. 进入 iPhone 中的 设置 > Safari 浏览器 > 高级 > Web 检查器，开启该选项。
    2. 打开 iTunes 并连接 iPhone，在 iPhone 弹框中选择信任该电脑。
    3. 打开命令行，执行以下命令，启动适配器：
    1
    remotedebug_ios_webkit_adapter --port=9000
    1. 在 iPhone 中打开 Safari 浏览器，打开待调试页面。
    2. 打开 Chrome 浏览器，进入 chrome://inspect/#devices 页面，在 Discover network targets 选项添加 localhost:9000 配置。刷新页面，这时页面中会出现 ‘Remote Target’ 列表，该列表展示了 iPhone 中打开的页面，点击 inspect，即可进行调试。（科学上网/edge）

h5键盘输入遮挡问题

​ 处理方式有 scrollIntoView /scrollTop，原生键盘安卓、safari适用，ios中可能有bug，后续待更新，以下为使用vant为例：

​ 整体思路：由于键盘控件定位语底部，用innerHeight ,getBoundingClientRect()计算输入DOM节点与视口底部的距离，小于键盘高度则需要显示，结合scrollTop按需来滚动，其中需要动态添加键盘占位空元素（高度与控件保持一致，需结合布局灵活计算），撑起滚动底部区域，此方案兼容性较好

1
<div v-if="showKeyboard" class="empty-keyboard"></div>
1
2
3
4
5
6
7
8
9
const scrollArea = document.querySelector('.scroll-l');
const arrBottom = window.innerHeight -
    e.target.getBoundingClientRect().y -
    e.target.getBoundingClientRect().height;
 if (arrBottom < 260) {
   nextTick(() => {
     scrollArea.scrollTop += 260 - arrBottom;
  });
}

待更新…