淘宝移动端对viewport是怎么做处理的?

发布于 2022-09-02 00:32:24 字数 695 浏览 24 评论 0

http://m.taobao.com 淘宝移动端这里为什么只对苹果的产品做了特殊处理?还有针对不同的window.devicePixelRatio,加载了不同的CSS(比如devicePixelRatio=2时,字体大小为30px;devicePixelRatio=1时,字体大小为15px),是怎么实现的?

var c = window.devicePixelRatio;
 
       if (!navigator.userAgent.match(/iPad|iPhone|iPod/i)) {
            c = 1
        }
        var b = 1 / c;
        document.write('<meta content="initial-scale=' + b + ",maximum-scale=" + b + ",minimum-scale=" + b + ',user-scalable=no" name="viewport"><link rel="stylesheet" type="text/css" href="//g.alicdn.com/mtb/??ctrl-error/0.1.1/error' + c + "x.css,app-purchase-index/0.5.1/index" + c + 'x.css">');

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

一桥轻雨一伞开 2022-09-09 00:32:24

使用的应该是淘宝自行开发的lib.flexible

项目中引入这个文件https://github.com/amfe/lib-flexible/blob/master/src%2Fflexible.js
通过less定义@rem,比如@rem:32rem,以后用到的除了字体以外的尺寸单位都将其除以@rem就行了。当然,这是针对640px而言的。

浅唱々樱花落 2022-09-09 00:32:24

可以看看这篇文章,对淘宝这个兼容有比较详细的讲解!
使用Flexible实现手淘H5页面的终端适配

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文