• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 淘宝的flexible适配方案为什么只对iOS进行dpr判断,对于Android始终认为其dpr为1?

淘宝的flexible适配方案为什么只对iOS进行dpr判断,对于Android始终认为其dpr为1?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含devicePixelRatio,dpr,amp,appVersion,navigator等相关知识,匿名希望在学习及工作中可以帮助到您
if (!dpr && !scale) {
        var isAndroid = win.navigator.appVersion.match(/android/gi);
        var isIPhone = win.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = win.devicePixelRatio;
        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;
        }
        scale = 1 / dpr;
    }

回复内容:

能提出这个问题,想必你也是看过Android & iOS设计尺寸规范 相关的东西,如果没有这张图很很不错:




第三代iPad发布会上,苹果给出了Retina设计标准的公式:其中 a代表人眼视角,h 代表像素间距,d代表肉眼与屏幕的距离。符合以上条件的屏幕可以使肉眼看不见单个物理像素点。这样的IPS屏幕就可被苹果称作“Retina显示屏”。将通常使用距离代入上公式可知:行动电话显示器的像素密度达到或高于300ppi就不会再出现颗粒感;手持平板类电器显示器的像素密度达到或高于260ppi就不会再出现颗粒感,而苹果电脑的Retina显示器像素密度只要超过200ppi就无法区分出单独的像素。

说多了......
(以下忽略低端机)
iPhone4, 4s, 5, 5s, 6, 6+, 6s, 6s+ 都是用的是Retina屏,其中4, 4s, 5, 5s, 6, 6s的ppi都是326,dpr都是2,6+和6s+ppi是441,dpr是3。在ipad上同样只有dpr2和3两种的屏幕。
再来看看安卓的吧,算了,我不想看dpr=1,1.5,1.75,2,2.5,3,4......
淘宝在设置initial-scale(屏幕缩放比)的同时使用的是rem的方式设置各种尺寸大小
因为Android设备的兼容问题太过复杂,Android Pad 和 中兴 等国产 Android 机有很多奇葩的BUG,比如:
  • viewport content 的写法要兼容各种奇葩 Android 设备,兼容测试的成本很高
  • 部分机型修改viewport之后产生屏幕抖动
  • 部分机型 WebView Width 与屏幕实际宽度不一致
  • 还有很多无法预料到的奇葩BUG存在
故统一对 Android 设备进行 dpr = 1 处理。

同时 flexible 是 2014年5月诞生的,国内的大前端对于移动端的经验还不算成熟,而手机淘宝能有这种思路,已经是非常厉害的一个方案!

顺便说点不相关的:
  1. 上述的几个小点的问题,后来阿里也有别的同学解决了,但方案并未开源
  2. 我们团队的方案是不对 viewport 进行缩放处理,仅根据 width 在 html 添加 font-size
  3. 对于1px 边框的处理是进行特性检查,对于支持的容器直接就写 border-width:0.5px
var docElem = document.documentElement; var testElem = document.createElement('div'); var fakeBody = document.createElement('body'); var refNode = docElem.firstElementChild || docElem.firstChild; testElem.style.border = '.5px solid transparent'; fakeBody.appendChild(testElem); docElem.insertBefore

您可能想查找下面的文章:

  • 淘宝的flexible适配方案为什么只对iOS进行dpr判断,对于Android始终认为其dpr为1?
  • 移动端视网膜(Retina)屏幕下如何解决网页中1px显示问题?

相关文章

  • 2018-12-03HTML5每日一练之Canvas标签的应用-矩阵变换
  • 2018-12-03web/html5调用摄像头实现二维码扫描效果(代码实例)
  • 2018-12-03IIS的MIME未注册MP4类型,导致无法识别vidoe标签的解决办法
  • 2018-12-03如何看待腾讯公司的X5浏览器内核?
  • 2018-12-03HTML5+JS实现俄罗斯方块原理及具体步骤_html5教程技巧
  • 2018-12-03html5 利用canvas实现超级玛丽简单动画_html5教程技巧
  • 2018-12-03HTML5 canvas基本绘图之绘制矩形
  • 2017-08-06html5模拟平抛运动(模拟小球平抛运动过程)
  • 2018-12-03html5中返回AudioTrackList对象的属性audioTracks
  • 2017-08-06纯HTML5+CSS3制作生日蛋糕(代码易懂)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • html5中的meta标签的三要素是什么?meta标签的使用总结
    • 前端工程师目前境况和三年后的发展状况会怎么样呢?
    • 有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
    • H5的LocalStorage本地存储使用详解
    • HTML5实现的震撼3D焦点图动画
    • H5计算手机摇动次数
    • 检测浏览器对HTML5和CSS3支持度的方法
    • HTML5第六天笔记
    • 如何利用HTML5实现等待加载动画的效果
    • HTML5 Canvas API制作简单的猜字游戏

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有