移动端调试网页需知

注意是网页，而不是 App

常见国内移动端浏览器

手机浏览器内核基本都是 webkit，只不过国内的重新封装了一层，所以谷歌浏览器自带的 Inspect Device 检测不出国内浏览器。

微信内置、qq浏览器： X5内核 ，由腾讯开发的。

一加自带浏览器： X5内核 037322GPU-M，目前我的是这个版本，问题好多， vue 已经用 babel 转了，但还是不支持，不知道为什么
QQ浏览器： X5内核 038615GPU-UU，目前我的是这个版本
UC浏览器： U4内核，由 UC 自主开发

由于移动端浏览器的五花八门，经常会遇到莫名其妙的 bug ，我们需要好用的调试工具，看下文。

调试工具

BrowerSync：可以同时在PC、平板、手机等设备下进项调试，需要电脑和手机在同一 wifi 下
Weinre : 功能与 Chrome DevTools 相似，需要在页面中插入一段 JS 脚本来实时调试页面 DOM 结构、样式、JS 等，另外它使用的是代理的方式，所以兼容性很好，无论是新老设备系统通吃。如果你的手机安装了 Chrome 浏览器，那么可以通过 USB 用 Chrome DevTools 调试，但是国内的手机用的浏览器在 Chrome DevTools 上无法识别，所以可以用过 Weinre 调试。详细可参考这儿，利用此工具可以调试这些：
- dom 元素
- network 监听
- source 打断点
- console 查看日志
fiddle 等代理工具，通过 usb 连接。我没成功…

响应式问题

现代浏览器我们直接使用了 vw ，创建了一个 px 转 vw 的函数，然后在 scss 中使用对应的像素值。

@function px2vw($number) {
    /* 因为我们的设计稿是320 */
    @return $number/320*100+vw;
}

使用：

.box {
    width: px2vw(30);
    font-size: px2vw(12);
    /* 其他属性如margin、padding、line-height这些都可以用vw */
}

以下情况需要酌情使用 @media:

如果需要适配 ipad ，因为这个屏幕比手机大很多，所以最好用 @media 修改下页面布局。不用 @media 直接让等比缩放也勉强可以接受。
用 css 写了特殊样式，比如说写一个三个横杠的菜单图标，我们要为每个横杠设置高度，这个值一般比较小，直接上面的 px2vw 函数最后可能生成的是带小数的 px，在手机端你会发现三个横杠不一样高。这时候我们需要用 @media 设置整数的高度

1px border 问题

利用伪类和 transform 的 scale
scss mixin:

@mixin border1px ($color){
    position: relative;
    border: 1px solid $color;

    html.pixel-ratio-2 & {
        border: none;
        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 200%;
            transform: scale(0.5);
            box-sizing: border-box;
            border: 1px solid $color;
            transform-origin: 0 0;
            pointer-events: none;
        }
    }

    html.pixel-ratio-3 & {
        border: none;
        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 300%;
            height: 300%;
            transform: scale(0.33);
            box-sizing: border-box;
            border: 1px solid $color;
            transform-origin: 0 0;
            pointer-events: none;
        }
    }
}

js :

var dpr = Math.floor(window.devicePixelRatio || 1);
if (dpr > 1) {
    document.documentElement.className = 'pixel-ratio-' + dpr;
}

上面的例子是四个方向都有 border ，若只有一个方向的，比如 border-top ，js 部分不变， scss 部分为 :

@mixin border1px-top ($color){
    position: relative;

    &:before{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 1px;
        display: block;
        background-color: $color;
        z-index: 1;
        html.pixel-ratio-2 & {
            transform: scaleY(0.5);
        }
        html.pixel-ratio-3 & {
            transform: scaleY(0.33);
        }
    }
}

最小字体限制

移动端浏览器没有 pc 浏览器最小字体 12px 的限制，可以直接指定小于 12px 的字体

图片问题

图片模糊问题：
有些手机屏幕是高清屏，比如说 iphone 系列，现在它的主流 dpr 是 2 和 3 ，所以如果我们要用图片的话需要使用 2倍图和 3倍图，不然高清屏下图片会模糊。
当然用 svg 也是可以的， svg 号称不会失真 , 但我在用 iphoneX 下有个小图标竟然有些模糊，原因不明…很纳闷
大图问题：
设计mm截的图有些 svg 有些大。对于这些 svg ，设计mm就帮我改成了 jpg 或 png，图片变小了一些，但还有部分大小还是有些大。
然后我用了压缩图片工具，这个工具压缩后的图片不会修改图片的分辨率，所以不会影响图片的清晰度。它的原理是减少了原本图片里使用的颜色数量，肉眼是看不出来区别的。
Svg 大小问题：
svg 文件中不要设置固定px的 width 与 height（如果设置了， svg 就不会根据 img 标签设置的宽高变化了），可以设值为 100% 。用 viewBox 来描述 svg 的宽高比就行了。
然后在引用 svg 的 img 标签上设置宽高，或者只设置其中的一个。本来设计mm给我的 svg 有固定的宽高，我手动改成了 100% ，其他手机浏览器下可以自动缩放适应，但在 IOS 下这些改过的没有缩放，最后通过添加下面样式解决：
1
2
3
4
// 父容器
.parent {display: flex;}
// svg
.icon {flex-shrink: 0;}

个别机型问题

UC 、 QQ 、 360 、 Chrome … 浏览器首屏工具栏问题：

若需要做首屏占满屏幕：

我用 vh 来实现占满屏幕，底部的工具栏会盖住一部分内容，但如果滚动到最底部，工具栏却不会盖住内容，应该是浏览器对 vh 的支持不太友好。针对首屏被盖住内容的部分，按下面处理：

let browser = navigator.userAgent;
if (browser.indexOf('MQQBrowser') !== -1 || browser.indexOf('UCBrowser') !== -1 || browser.indexOf('Chrome') !== -1) {
    // 不知道工具栏具体的高度，所以是大概的给需要改变位置的元素加了 50px
    let downSignEle = document.querySelector('.down-sign');
    downSignEle.style.bottom = parseInt(getComputedStyle(downSignEle)['bottom']) + 50 + 'px';
}

用 js 计算屏幕可见高度，建议这种方式，各种浏览器下都会统一

1
2
3

let screenH = document.documentElement.clientHeight;
let firstPageEle = document.querySelector('.first-page');
firstPageEle.style.height = screenH + 'px';

IOS 系统下滚动不流畅，添加下面的样式：

1
2
3

height: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;

IOS 点击去除灰色选中效果，添加样式：
1
-webkit-tap-highlight-color: rgba(0,0,0,0);
UC 下 text-align:center 无效
使用的 UIkit 的 banner 中 text-align:center 生效，但自己写的却不生效，对比样式发现没啥区别，没找到原因，最后用了下面的方案实现 center 效果，有哪位大佬知道请留言。
1
2
display: flex;
justify-content: center;