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

问题:移动端使用rem的情况下,面板太小的解决方案 #32

Closed
jzlxiaohei opened this issue Sep 16, 2017 · 12 comments
Closed

Comments

@jzlxiaohei
Copy link

现在移动端,为了适配大小问题,使用rem的解决方案。 具体见 https://github.com/amfe/lib-flexible

三倍屏下,会先把页面的 scale 设成 1/3, 这种情况下,调试面板就太小了。

我们自己写css时,会通过postcss 把px 转成rem。

这个虽然不是库需要考虑的,但是移动端rem还是挺常用,这种情况的确太影响使用了。

@surunzi
Copy link
Member

surunzi commented Sep 21, 2017

试了下,动态修改样式的数值是个可行的方案,但由于有部分数值hardcode在了js中没办法只通过修改样式文件完美处理,下个版本我看能不能将那部分代码移除掉。

@jzlxiaohei
Copy link
Author

恩,在不影响不用rem的情况下,希望尽量考虑下。非常感谢

surunzi added a commit that referenced this issue Sep 21, 2017
@surunzi
Copy link
Member

surunzi commented Sep 21, 2017

目前看来使用zoom属性将样式scale回去效果还行,ios实机下测试字体无效,需要替换evalCss函数进行字体大小的修改,试下有没有效 @jzlxiaohei

var initialScale = 0.33333;

var scale = (1 / initialScale).toFixed(2)

if (/iPhone/.test(navigator.userAgent)) {
    var mark = [];
    eruda.util.evalCss = function evalCss(css) {
        css = css.toString();
        css = css.replace(/font-size:(\d+)px/g, function($0, $1) {
            return 'font-size:' + (+$1 * scale) + 'px';
        });
        for (var i = 0, len = mark.length; i < len; i++) {
            if (mark[i] === css) return;
        }
        mark.push(css);

        var container = evalCss.container || document.head,
            style = document.createElement('style');

        style.type = 'text/css';
        style.textContent = css;

        container.appendChild(style);
    }
}

eruda.init();

var $ = eruda.util.$;
$('.eruda-dev-tools').css('zoom', scale);
$('.eruda-entry-btn').css({
    width: 40 * scale,
    height: 40 * scale,
    fontSize: 25 * scale,
    lineHeight: 40 * scale,
    borderRadius: 10 * scale
});
eruda._entryBtn._setPos();

@AkiraSun
Copy link

rem布局下试了楼主这个方法的确还是字体的大小不能更改,按钮位置也会发生些变化,感觉移动端这个适配的必要性还是非常大哈

@surunzi
Copy link
Member

surunzi commented Sep 26, 2017

这样做按钮移位是已知问题,不过ios下替换了eruda.util.evalCss字体也没法改变?可否贴个Demo链接? @AkiraSun

@AkiraSun
Copy link

http:https://www.jianshu.com/p/985d26b40199
我使用的是这种高清rem布局,所以会导致布局不准确
按钮可以修改,eruda.util.evalCss下的字体选项略多。。不知从何下手

@surunzi
Copy link
Member

surunzi commented Sep 26, 2017

@AkiraSun 不太明白你说的情况是什么,我自己用上边的代码在android跟ios下基本是可以正常使用的。

PS: 那个var initialScale = 0.33333是需要自己根据页面当前scale进行调整。

@AkiraSun
Copy link

@surunzi 可以麻烦贴下eruda.util.evalCss 修改的代码吗

@tesky0125
Copy link

感谢楼主,font-size正则匹配有点小问题,未考虑空格,增加\s*即可,以下未更新后的代码片段

        css = css.replace(/font-size:\s*(\d+)px/g, function($0, $1) {
            return 'font-size:' + (+$1 * scale) + 'px';
        });

@tesky0125
Copy link

另外initialScale = 0.33333; 建议改成

var dpr = window.devicePixelRatio || 1;
var initialScale = 1 / dpr;

surunzi added a commit that referenced this issue Oct 6, 2017
@surunzi
Copy link
Member

surunzi commented Nov 5, 2017

@jzlxiaohei 1.3.0加了autoScale功能,可以试下有没有效果

@jzlxiaohei
Copy link
Author

我这个验证了下,展示效果很赞。

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

No branches or pull requests

4 participants