Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

关于dpr #1

Open
ghost opened this issue Nov 23, 2016 · 2 comments
Open

关于dpr #1

ghost opened this issue Nov 23, 2016 · 2 comments

Comments

@ghost
Copy link

ghost commented Nov 23, 2016

关于android/IOS的DPR值没有考虑进去,如果要做高清适配,是不是还需要增加DPR的识别和设置???

@2ue
Copy link

2ue commented Nov 24, 2016

对的,他的方案确实是没有把dpr考虑进去,并且没有解决手机1px问题。
可以参考一下我的解决方案。

(function(designSize) { //designSize为设计稿的尺寸(宽)
    var doc = document,
        docEl = doc.documentElement,
        devWidth = docEl.clientWidth > 1080 ? 1080 : docEl.clientWidth,
        dpr = devicePixelRatio || 1,  //如果不支持devicePixelRatio则默认为1
        scale = 1 / dpr,
        width = dpr * devWidth,
        document.querySelector('meta[name="viewport"]')
          		.setAttribute('content','width=' + width +
                        ', initial-scale=' + scale +
                        ', maximum-scale=' + scale +
                        ', minimum-scale=' + scale +
                        ', user-scalable=no');
  		docEl.style.fontSize = devWidth / (designSize / 100) * dpr + 'px';
})(750);

然后在写CSS的时候,按设计稿上的尺寸除以100就可以了。

@hbxeagle
Copy link
Owner

hbxeagle commented Dec 5, 2016

这个方案确实没处理dpr,1px的思路的单独判断加特别的样式控制。谢谢 @dayney@2ue 的方案,学习了。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants