开发者社区> 自娱> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

[适配性]移动Webapp自适应方案

简介:
+关注继续查看

此次方案的优化点

  • 页面元素会随宽度的变化而自适应的放大和缩小,和原来不同的是,全页面的高度、字体都会随宽度变化,保持同比例的变化,保证页面不会变形。页面样式只需要写一套CSS布局即可。
  • 对于无法获取到屏幕宽度的手机(极少数个例),我们也可以通过自定义的模式添加支持

统一布局规则

  1. 内部布局统一使用px作为单位,可以根据视觉稿来还原;
  2. 字体也使用px,可以保持和其他的元素的相同的放缩比例,不要采用em,或者rem,因为目前没有根据device-width来设定根节点的默认字体,使用rem会随浏览器本身差异而变化,不可控;
  3. 图片资源,根据设计的提供的资源情况而定。一般资源可根据宽度加载不同的图片资源的方案。icon类资源,按建光的方案,使用icon fonts
  4. 列表和表格较多,可以考虑是否需要加入Pure.css来绘制表格;

可能存在的问题

  • border的宽度,设定为1px,在Retina屏幕上可能会显示2个像素。
  • 有的宽高比不正常的手机,大部分页面可能会因为高度略高而垂直可滑动,我们的页面基本垂直都是可以滑动的,这个方案可以通过设定高度可以解决,但是也会影响显示效果。

前提准备


最初执行一段判断代码,iOS和Android平台的webkit的差异,需要区分来对待。
根据userAgent来区分设备,然后加载不同的viewport配置。

var adaptUILayout = (function(){

//根据校正appVersion或userAgent校正屏幕分辨率宽度值
var regulateScreen = (function(){
  var cache = {};

  //默认尺寸
  var defSize = {
    width  : window.screen.width,
    height : window.screen.height
  };

  var ver = window.navigator.appVersion;

  var _ = null;

  var check = function(key){
    return key.constructor == String ? ver.indexOf(key) > -1 : ver.test(key);
  };

  var add = function(name, key, size){
    if(name && key)
      cache[name] = {
        key : key,
        size : size
      };
  };

  var del = function(name){
    if(cache[name])
      delete cache[name];
  };

  var cal = function(){
    if(_ != null)
      return _;

    for(var name in cache){
      if(check(cache[name].key)){
        _ = cache[name].size;
        break;
      }
    }

    if(_ == null)
      _ = defSize;

    return _;
  };

  return {
    add : add,
    del : del,
    cal : cal
  };
})();


//实现缩放
var adapt = function(uiWidth){
  var
      deviceWidth,
      devicePixelRatio,
      targetDensitydpi,
  //meta,
      initialContent,
      head,
      viewport,
      ua;

  ua = navigator.userAgent.toLowerCase();
  //whether it is the iPhone or iPad
  isiOS = ua.indexOf('ipad') > -1 || ua.indexOf('iphone') > -1;

  //获取设备信息,并矫正参数值
  devicePixelRatio = window.devicePixelRatio;
  deviceWidth      = regulateScreen.cal().width;

  //获取最终dpi
  targetDensitydpi = uiWidth / deviceWidth * devicePixelRatio * 160;

  //use viewport width attribute on the iPhone or iPad device
  //use viewport target-densitydpi attribute on the Android device
  initialContent   = isiOS
      ? 'width='+ uiWidth +', user-scalable=no'
      : 'target-densitydpi=' + targetDensitydpi + ', width='+ uiWidth+', user-scalable=no';

  //add a new meta node of viewport in head node
  head = document.getElementsByTagName('head');
  viewport = document.createElement('meta');
  viewport.name = 'viewport';
  viewport.content = initialContent;
  head.length > 0 && head[head.length - 1].appendChild(viewport);
};
return {
  regulateScreen : regulateScreen,
  adapt : adapt
};
})();
/*
 *640为当期页面指定的统一分辨率,其他分辨率下均为此分辨率的放缩变化
 */
adaptUILayout.adapt(640);

上述方法的运行结果是(Android对应nexus5,其他手机target-densitydpi会有不同):

IOS: <meta name="viewport" content="width=640, user-scalable=no">
Android:<meta name="viewport" content="target-densitydpi=853.3333333333333, width=640, user-scalable=no">

上述方案可以解决市面上大多的手机的屏幕适配问题,但是对于有些特殊的获取不到window的width的手机,可以通过自动添加的模式加入适配方案。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
短视频app制作,主流负载均衡方案的分析
短视频app制作,主流负载均衡方案的分析
0 0
APP适配测试白皮书(二)
碎片化越来越严重,苹果相比Android来说稍微好点但最近几年由于创新乏力不断在屏幕尺寸上做文章也使得苹果的适配开始面临更多的挑战。
0 0
APP适配测试白皮书(一)
碎片化越来越严重,苹果相比Android来说稍微好点但最近几年由于创新乏力不断在屏幕尺寸上做文章也使得苹果的适配开始面临更多的挑战。
0 0
iOS的App模块化编程的框架实现方案——BeeHive
BeeHive是用于iOS的App模块化编程的框架实现方案,吸收了Spring框架Service的理念来实现模块间的API耦合。
0 0
“一个APP竟然可以适配这么多设备?!”《优酷响应式布局技术全解析》开放下载
本书分享优酷应用技术团队使用响应式布局来实现“一个APP适配不同设备”的技术思考和实践。
0 0
短视频APP源码中系统评论功能是如何实现的
短视频系统中评论功能的分量在短视频功能里可谓是举足轻重,下面简单介绍下,短视频系统中的评论功能的实现方式:评论分为对视频的评论和对评论的回复两部分:对于评论列表大家再熟悉不过了,就是一个tableview罢了,相信刚入门的技术也可以实现。
457 0
iOS精华实例之App启动插画的自定义过度
转载请注明出处,保留原帖地址及作者署名. Url:http://blog.csdn.net/ysy441088327/article/details/8852304 Author:余书懿 引言: 精华实例是博主我新开设的一个专题,这个专题主要介绍一些在iOS应用中非常值得实践的例子.
890 0
+关注
自娱
阿里巴巴无线客户端性能与安全负责人 Gradle中文文档作者
文章
问答
文章排行榜
最热
最新
相关电子书
更多
混合APP开发模式为什么成为主流
立即下载
移动 App 性能监测实践(iOS篇)
立即下载
移动App性能监测实践(ios篇)
立即下载