前端培训-初级阶段-场景实战（2019-05-23）-移动端适配bug

xi4oh4o 发布于2019-08-26 13:47 / 2365人阅读

摘要：前端最基础的就是。默认构建一个真实的设置为一个理想值追加到树中获取理想值和实际值的比例计算值进行比例换算移动端适配方案前端培训初级阶段之移动端适配原理参考文献淘宝弹性布局方案实践布局详解移动端自适应方案

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

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

今天我们要讲什么？

flexible 适配方案

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

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

主流移动端适配方案（）

flexible 适配方案 flexible 是什么

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

flexible 原理

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

flexible 注意事项

如果页面有 viewprot 他会使用页面旧有的。

flexible 设置了一个最大值（75），这样出来在页面中看到的效果就是居左750设计稿的样式。

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

单位改成vw。（其实就是换方案了，flexible官方也建议换了）

设置父级，然后居中。这样就两边空白一样了。基本可以接受。

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

因为默认 flexible 是根据系统缩放的。我们为了测试方便，我们可以人为设置一下。
注意以上方案上线时记得去掉。否则部分小页面会出问题。

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

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

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

客户端设置（网上查的，因为客户端大哥不给改，且需要发版。所以我没试）

vw 方案，我不用字体大小还不行吗？嗯，这个方案的确可以。

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

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

修改 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）

参考文献

淘宝弹性布局方案lib-flexible实践

flexible.js 布局详解

flexible.js 移动端自适应方案

idc机房托管云服务器移动端适配移动端适配方案移动端适配 js 移动端web前端框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109544.html

前端培训-初级阶段-场景实战（2019-05-23）-移动端适配bug

摘要：前端最基础的就是。默认构建一个真实的设置为一个理想值追加到树中获取理想值和实际值的比例计算值进行比例换算移动端适配方案前端培训初级阶段之移动端适配原理参考文献淘宝弹性布局方案实践布局详解移动端自适应方案前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技...

FingerLiu 2019-08-02 16:18 评论0 收藏0
前端培训-初级阶段-场景实战（2019-05-23）-移动端适配bug

摘要：前端最基础的就是。默认构建一个真实的设置为一个理想值追加到树中获取理想值和实际值的比例计算值进行比例换算移动端适配方案前端培训初级阶段之移动端适配原理参考文献淘宝弹性布局方案实践布局详解移动端自适应方案前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技...

psychola 2019-08-30 10:54 评论0 收藏0
前端培训-初级阶段-场景实战（2019-06-06）-Content-Type对照表及日常使用

摘要：前端最基础的就是。数据被编码为键值对。大法好，精准识别，也算是正确的表单提交。全局的默认值实例默认值创建实例时设置配置的默认值在实例已创建后修改默认值拦截器，可以拦截错误，进行上报。参考资料类型看云前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水...

mayaohua 2019-08-02 15:13 评论0 收藏0
前端培训-初级阶段-场景实战（2019-06-06）-Content-Type对照表及日常使用

摘要：前端最基础的就是。数据被编码为键值对。大法好，精准识别，也算是正确的表单提交。全局的默认值实例默认值创建实例时设置配置的默认值在实例已创建后修改默认值拦截器，可以拦截错误，进行上报。参考资料类型看云前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水...

张金宝 2019-08-23 17:55 评论0 收藏0
前端bug录-移动端下载图片

摘要：前天，快下班的时候，一朋友发来一个战绩图。然后又提出了一个需求，下载这个图片。我前两天才写了文章的前端培训初级阶段场景实战下载文件下载进度小韭菜之前用过还是啥来着。不好使的原因就是和在移动端微信浏览器无法下载。移动端，走长按保存图片。前天，快下班的时候，一朋友发来一个战绩图。这是要约我上分？（这兄弟一手 C 位吊打亲友）。我果断拒绝三连。结果，小韭菜问我，右边那个图怎么做？那好了，事...

Pluser 2019-08-05 17:12 评论0 收藏0