对于移动端布局来说, 我会有两种备选方案, 因为太久没用 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 前面设置这样一条代码:
<meta name="flexible" content="initial-dpr=1" />
这样, 无论是什么机型都会显示为普通屏的结果了. 可能这样会丢失 ios 机子高清屏的特性, 但是这是最好的解决办法.
另外, 查找更多言简意赅的文章请点击一统江霸 http://lizhongblog.com/ , 可以在这里添加我的微信一起探讨前端技术, 或者地址栏直接搜索 http://lizhongblog.com/ 就可以找到我.
来源: http://www.qdfuns.com/article/28128/130d646c1b28b144e04f30cad0b0b8a5.html