靠谱 的软件外包伙伴

您的位置:首页 > 新闻动态 > HTML5-移动端软件开发响应式布局新方案

HTML5-移动端软件开发响应式布局新方案

2016-08-24 14:27:54

前言

  大家都知道当下,手机屏幕大小多种多样,而且即使同样大小的size,每个手机的设备像素比还不一样。当我们选用html5来开发移动应用的时候,有没有一种合适的方案来完美的适配到所有的屏幕呢? 
对移动端接触不多的,可以先了解下移动端的单位、viewport的概念。这里也不再赘述,通过以下连接了解。 
1.http://www.cnblogs.com/2050/p/3877280.html  2.http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml

经典方式

  先简要的介绍下现在多数开发者使用的方式,由于这些方式大家或多或少都使用过,而且网上也有非常详细的教程,我就不再重复造轮子,只是简单的列举下。 
1.css3 @media

http://www.w3cways.com/1180.html 
这种方式适配起来良好,但是还是无法兼容所有的屏幕,而且各个样式都用@media写几套,很麻烦,也不利于后期扩展维护。

2.px+百分百+flex

像目前接触过的一些前端框架ionic、bootstrap、amaze、mui等,对于已经确定无需随屏幕变化的元素,一般用px固定大小,对于宽度的处理用百分比或flex来灵活处理。

这种方式处理起来,大体还好,但是对于小屏iphone5s和大屏iphone6 plus,某些布局只能折中处理。最大的缺陷是, 一些布局无法通过百分比或者flex设置的时候,布局的样式和字体的大小都无法随屏幕的变化而响应式变化。

3.对于viewport的处理

  • 固定高度,宽度自适应
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  • 		1
  • 固定宽度,动态生成viewport
var fixScreen = function() {
    var metaEl = doc.querySelector('