前端培训初级阶段场景实战20190523移动端适配bug

35次阅读

共计 1895 个字符，预计需要花费 5 分钟才能阅读完成。

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

场景实战这块内容每个人的内容都不一样。所以最近的更新基本都是我遇到并解决掉的问题。后期会把他们的内容贴地址。

今天我们要讲什么？

  1. flexible 适配方案
  2. flexible 适配方案（放大 ios 中的 vConsole）
  3. flexible 适配方案遭遇放大手机字体大小
  4. 主流移动端适配方案（）

flexible 适配方案

flexible 是什么

amfe/lib-flexible 是手淘的可伸缩布局方案，学习的话可以点进去，都是中文的，我就不用复制了吧。

flexible 原理

它是把屏幕分成了 10 份，1 份 ==1rem。如 750/10=75。
之后在 <html> 标签上增加 data-dpr属性和 font-size样式。然后我们就可以快乐的使用 rem 来基于根节点设置了。

flexible 注意事项

  1. 如果页面有 viewprot 他会使用页面旧有的。
  2. flexible 设置了一个最大值（75），这样出来在页面中看到的效果就是居左 750 设计稿的样式。

  3. 基于第二点，在部分曲面屏手机上或者大屏幕手机（三星 note8）上，会出现右边出现大片空白。解决方案如下

    1. 单位改成 vw。（其实就是换方案了，flexible 官方也建议换了）
    2. 设置父级，然后居中。这样就两边空白一样了。基本可以接受。

flexible 适配方案（放大 ios 中的 vConsole）

因为默认 flexible 是根据系统缩放的。我们为了测试方便，我们可以人为设置一下 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">。
注意以上方案上线时记得去掉。否则部分小页面会出问题。

flexible 适配方案遭遇放大手机字体大小

因为我司历史产品原因，有部分老年用户（不说老年了，我爸也是调）。因为手机字体太小，调节了手机的字体大小和字体缩放大小。
这就导致 基础值被异常的放大 了，页面显示乱了。

修改系统字体大小的解决方案

  1. 客户端设置（网上查的，因为客户端大哥不给改，且需要发版。所以我没试）
  2. vw 方案，我不用字体大小还不行吗？嗯，这个方案的确可以。

  3. 既然你放大了，那我给你缩小不就好了。

    1. 获取所有标签，然后给 font-size 缩小。你别说，这个方案还真行。
      但是这个方法太恐怖了。而且后续节点不可控

    2. 修改 flexible 增加 zoom 的控制。嗯，完美解决。

      ;(function(win, lib) {
    // 默认 1:1
    var zoom = 1;
    try{
        // 构建一个真实的 DOM
        var dom = document.createElement('vv-ln-test-fontsize');
        // 设置为一个理想值
        dom.style.fontSize = '16px'
        // 追加到 DOM 树中
        document.head.appendChild(dom)
        // 获取理想值和实际值的比例
        zoom = 16/parseFloat(window.getComputedStyle(dom).fontSize);
        console.log(zoom, document.documentElement.style.fontSize)
    }catch(e){console.log(e)
    }
    var vv_fontSizeZoom = lib.vv_fontSizeZoom || (lib.vv_fontSizeZoom = zoom);
})(window, window['lib'] || (window['lib'] = {}));
      function refreshRem(){var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 750) {width = 750 * dpr;}
    var rem = width / 10 * lib.vv_fontSizeZoom;// 计算值进行比例换算
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

移动端适配方案

前端培训 - 初级阶段（9 -12）之 移动端适配原理 rem（px、em、rem、%、vm）

参考文献

  1. 淘宝弹性布局方案 lib-flexible 实践
  2. flexible.js 布局详解
  3. flexible.js 移动端自适应方案

正文完
css dom html
发表至： javascript
2019-05-15
 0
ggit (git gui) — 开发记录 (一)
关于javascript:一款功能强大的开源excel在线表格
关于javascript:Vue-源码分析-选项合并策略2
简单聊聊浏览器JS事件触发机制