移动前端适配—低级、无趣的老方法

首先请了解一下移动前端中 viewport (视口)https://www.css88.com/archives/5975

这里介绍一下几个移动前端适配—低级、无趣、一堆问题的老方法。早在几年前,移动前端适配有几个很简单使用的方法。那时屏幕尺寸或者说分辨率没如今这么多。一般设计师设计移动端页面统一按照640像素的宽度设计。因为当时的主流是iPhone4,iPhone4s ,iPhone5及iPhone5s,物理像素宽度为 640,分辨率为320。其他安卓机型可以根据这些尺寸做简单粗暴的匹配。

例如下面是适配最简单粗暴的方法,而且根据我平时查看项目的代码的习惯,还有相对一部分项目还是使用这个方法做项目,或者维护项目:

<meta name="eqMobileViewport" content="width=320,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

看起来很简单,也很实用。开发时候一切根据640的设计稿除以2处理,字体也用简单的像素做单位(用rem换算麻烦)似乎是很完美,但是实际情况,特别是一些对齐,背景吻合总是会出现问题。还有就是用现在高分辨率的iPhone6s等手机看,总是会被设计师鄙视,看图就知道了。

8C727175-2D79-418E-9AB4-2D0A0DDC1F16

如今手机屏幕尺寸越来越多,可以稍微升级一下上面的方法,同样在html头部head标签中先插入一个meta标签,在插入一个脚本设置缩放值:

<meta id="eqMobileViewport" name="viewport" content="width=320, initial-scale=1, maximum-scale=1, user-scalable=no">
<script>
    var g = document.documentElement.clientWidth / 320;
    document.getElementById('eqMobileViewport').setAttribute("content", "width=320, initial-scale=" + g + ", maximum-scale=" + g + ", user-scalable=no")
</script>

这样就比较完美了,如图:

3A06A597-D78F-4025-A391-1B59E6292B67

这只是根据页面做了简单的缩放,能解决一部分的问题。但是随着iPhone6,iPhone6s的发布,很多设计师设计界面的时候普遍开始使用750宽度的设计稿,甚至更高的分辨率,以满足用户的视觉体验。那么实际开发中,换算又成了一个问题,增加了开发成本!更好的方式留在下次讲吧。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 移动前端适配—低级、无趣的老方法

评论 3

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    这俩方式是有点老了~感觉还是动态算 rem 省事。

    Sivan3年前 (2016-05-30)回复
  2. #-48

    ls rem+1

    付云飞3年前 (2016-06-02)回复
  3. #-47

    rem计算有没有什么弊端?目前单个项目里我都是使用rem来计算

    会飞的胖子2年前 (2016-09-30)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏