专栏首页前端小叙flexible.js移动端适配安卓高分辨不兼容问题

flexible.js移动端适配安卓高分辨不兼容问题

根据网上找到的解决办法,对于安卓设备,把dpr=1改为当前设备的dpr

if (!dpr && !scale) {
        if (isIPhone) {
            // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            // 其他设备下,仍旧使用1倍的方案
            // dpr = 1;
           // 其他设备下,改为使用设备当前的dpr
            dpr = devicePixelRatio;
        }
        scale = 1 / dpr;
    }    

这时候会不会发现有些安卓机可以正常显示,有些安卓机显示样式反而特别小呢?其实有一点一定要注意,在代码中,我们可能针对不同dpr的设备设定了不同的样式,比如图片、宽高、字体大小等,这时候就要考虑到安卓可能的dpr了,否则这些针对性的样式必然会按默认的dpr=1的样式来展示的。比如下面是我默认写的font-size

目前只是测了一部分安卓机,没有出现问题,dpr=2.75 是 小米 mix,dpr=4 是三星s6 edge ,我看网上安卓应该还有dpr=1.5的情况,目前我还没遇到。所以一定要写多种方案,否则,安卓的样式真的就跪 了…………………………

这里有一片文章写的比较好,可以推荐阅读:http://blog.csdn.net/a0405221/article/details/78913714

https://www.cnblogs.com/ling-du/p/4623623.html

http://mdsa.51cto.com/art/201507/484215_2.htm

在测试过程中还发现一个问题,vivo打不开我们的手机端网站………………换任何一个浏览器都不行……                                                       

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue实现文章内容过长点击阅读全文功能

    直接上代码: html: <div class="bodyFont clearfloat" id="bodyFont" ref="bodyFont" :clas...

    蓓蕾心晴
  • h5 video标签在ios8,9无法设置静音

    1、如果默认给video标签加muted属性,调试获取到的为true,但是依然有声音,即:即使设置为true,也是有声音; 2、通过js改变muted是无法改变...

    蓓蕾心晴
  • 小程序实现textarea随输入的文字行数变化高度自动增加

    参考链接:https://blog.csdn.net/liuwengai/article/details/78987957

    蓓蕾心晴
  • Serverless SSR 技术在「腾讯在线教育」中的实践

    腾讯在线教育团队在传统的 Web 应用方向其实有很多技术方面的尝试,包括传统离线包、PWA 离线应用等,但是每个技术栈都有其优点与缺点,目前团队的技术方案对比如...

    腾讯云serverless团队
  • 支付宝变支付鸨,楼下小店营养快线再度脱销

    镁客网
  • 寒武纪们再爆发?

    持续亏损、落地困难、技术壁垒......这些年,当AI芯片行业越来越多的问题浮出水面时,从业者、投资方逐渐回归理性,开始重新审视这个行业,万能的AI芯片也一步步...

    ToB行业头条
  • 没做过大项目,但我会建大项目

    那时候使用着曾经宇宙最好用的JAVA IDE Eclipse写代码,也没有觉得界面简陋影响编码。

    JackieZheng
  • OpenGL 3D 模型加载和渲染

    在使用 OpenGL 绘制时,我们最多绘制的是一些简单的图形,比如三角形、圆形、立方体等,因为这些图形的顶点数量不多,还是可以手动的写出那些顶点的,可要是绘制一...

    glumes
  • Java单体应用 - 开发工具 - 01.IntelliJ IDEA

    原文地址:http://www.work100.net/training/monolithic-tools-intellij-idea.html

    光束云
  • 扛不住道歉了,但支付宝这次可能没有白折腾

    上个周末支付宝对“校园日记”进行灰度测试,在圈内掀起广泛讨论。由于一些生活圈出现大尺度照片,部分媒体对此进行广泛报道,尤其是CCTV介入更是让支付宝感受到很大的...

    罗超频道

扫码关注云+社区

领取腾讯云代金券