靠谱 的软件外包伙伴

您的位置:首页 > 新闻动态 > 软件外包网站如何做移动端适配?

软件外包网站如何做移动端适配?

2016-03-25 10:45:17

目前最流行的方案当属淘宝的flexible了,因为之前一直做服务端开发,对前端不是很了解。对于这套方案看了n久还是不太理解,后来自己学习viewport的相关概念,捉摸出一套自己的办法(至少我没查到有人这么干的...),写在这里和大家分享一下

其实对于多数的移动h5的适配需求并没有那么繁琐,只要保证和设计稿比例一致,在各种奇葩屏幕都能够显示出完整的信息就可以了。所以这里不讨论retina屏幕图片模糊问题,只考虑适配

 

需求:

 

  1. 通过设计稿各种标注,解决css中尺寸和单位问题
  2. 保证各种手机能够完整显示内容,比例和设计稿一致
  3. 如果希望做retina适配,多一步计算dpr并按需加载图片就行了

 

假定设计稿为750px

 

方案一:

必备知识:rem 在html中设置font-size为10px,那么1rem就为10px,所以想表示宽度为100px的div那就用10rem

  • 获取手机屏幕真实宽度:

    		window.innerWidth;
  • html的font-size:

    		var rem = window.innerWidth/750;

这里需要说明一下,除以750是除以设计稿的宽度。设计稿中的1px换做其他屏幕中就是 其他手机屏幕尺寸的1/750,也就是1rem。

  • 动态设置rem大小

    		var docEl = document.documentElement; var fontEl = document.createElement('style'); docEl.firstElementChild.appendChild(fontEl); fontEl.innerHTML = 'html{font-size:' + rem + 'px;}';

这个时候就尽情玩耍吧,100px就写作100rem,字体的话也直接写rem。

方案二:

首先要理解viewport的概念,可以参考这篇文章,写的很详细文

移动前端开发之viewport的深入理解。总结下来就是viewport在移动端是可变的,我们把这个叫做layout viewport。默认都比手机的屏幕大很多(多数都是980px)。如果什么都不设置,我们的px都是相对于这个layout viewport而言的。所以正常情况下我们在手机上看pc的页面都是看不全的,但是各个手机厂商的做法不太一样,有的就是看不全了,只显示一个角落,但是例如iphone这种就会对页面进行缩放,让整个pc页面都挤进你的小屏幕中,所以看到的字体或者图片本身也就小了。如果还是不明白呢也没关系。按照下面的做法做就可以了。

之前提到所有的px都是相对layout viewport而言的,750的设计稿中100px是相对750px宽度,如果让手机也认为自己的layout viewport是750px,那么所有的尺寸换算就交给系统自己完成就行了。所以:

<meta name="viewport" content="width:750,user-scalable=no"/>

设置好之后,按照设计稿元素尺寸直接写100px就是想要的效果了

总结: 以上就是我对移动端处理的办法,简单而且有效。不需要复杂的js代码,不用less,scss也能正常使用。如果要说缺点的话也就是随着屏幕尺寸增大或者缩小,字体也会随着增大缩小,并不会像淘宝那种在视觉感官上的大小不变,不过我觉得对于绝大多数的h5页面是没必要这么做的。

 

关于:中科研拓

深圳市中科研拓科技有限公司专注提供软件外包、app开发、智能硬件开发、O2O电商平台、手机应用程序、大数据系统、物联网项目等开发外包服务,十年研发经验,上百成功案例,中科院软件外包合作企业。通过IT技术实现创造客户和社会的价值,致力于为用户提供最佳的软件解决方案。联系电话400-0316-532,邮箱sales@zhongkerd.com,网址www.zhongkerd.com


  上一篇   [返回首页] [打印] [返回上页]   下一篇