你不知道的移动端布局

原创 15727572247 随笔 移动端布局 357阅读 2018-05-04 16:30:24 举报

对于移动端布局来说,我会有两种备选方案,因为太久没用css画页面了,如果让我快速搭建一个手机页面,我通常会用响应式布局或者flexible布局。响应式布局大家都知道,flexible.js是个牛逼的插件,上面的一篇文章就说了,他会根据不同的机型去设置根目录的font-size和dpr,然后你需要做的就是在css中设置data-dpr='2'或者data-dpr='3'时候设置他的font-size和line-height(一般情况下是这两个)。但是今天flexible遇到了一个问题:

当我们在页面中需要引入地图或者画一个图标的时候在plus机型上面通常是这样的表现:字体变小了,视口缩小了,画布被放大了。

那么遭遇这两种情况下有下面两种解法:
1、在css中单独设置css-scale,将对应的字体在不同的dpr下设置不同的结果,或者在js中进行设置也一样。但是一般地图会存在交互或者点击事件,那么这种解决方法会在点击之后位置发生偏移,所以存在交互的情况下这种解决办法是不行的。

2、将所有机型下的data-dpr都统一设置为1,也就是在title前面设置这样一条代码:

这样,无论是什么机型都会显示为普通屏的结果了。可能这样会丢失ios机子高清屏的特性,但是这是最好的解决办法。

另外,查找更多言简意赅的文章请点击一统江霸,可以在这里添加我的微信一起探讨前端技术,或者地址栏直接搜索 http://lizhongblog.com 就可以找到我。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复