`
MyEyeOfJava
  • 浏览: 1151921 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
7af2d6ca-4fe1-3e9a-be85-3f65f7120bd0
测试开发
浏览量:71167
533896eb-dd7b-3cde-b4d3-cc1ce02c1c14
晨记
浏览量:0
社区版块
存档分类
最新评论

[适配性]移动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的手机,可以通过自动添加的模式加入适配方案。

分享到:
评论

相关推荐

    屏幕自适应资源包领取

    屏幕自适应是现代软件开发,特别是移动应用和网页设计中的核心概念。随着各种设备尺寸的多样化,如手机、平板电脑、笔记本电脑以及不同分辨率的桌面显示器,开发者必须确保他们的产品能在任何屏幕上提供良好的用户...

    jQuery自适应横排下拉导航代码.zip

    "jQuery自适应横排下拉导航代码"是一个专门用于创建高效、美观且响应式的水平导航栏的解决方案。这个代码库利用了JavaScript库jQuery的强大功能,为用户提供了一种直观的交互方式,特别是对于内容丰富的网站,下拉...

    E语言窗口组件尺寸自适应

    2. 考虑不同屏幕分辨率下的适配性,确保在大屏和小屏设备上都有良好的用户体验。 3. 在调整组件尺寸时,要考虑组件内容的可读性和交互性。 4. 使用合适的布局管理器,以简化代码并提高可维护性。 总结,E语言窗口...

    响应式健身中心模板_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip

    这款模板是基于HTML、CSS和JavaScript构建的,尤其强调了移动设备的适配性,能够自适应不同屏幕尺寸,包括手机和平板电脑。 1. HTML5:作为基础结构,HTML5提供了许多增强功能,如语义化标签(如、、等),媒体元素...

    夏普采用IBM移动中间件解决方案

    【夏普采用IBM移动中间件解决方案】的知识点详解: IBM WebSphere Everyplace Access (WEA)是IBM开发的一款移动中间件解决方案,旨在帮助企业扩展业务流程和后台数据的存取到移动设备,如夏普的Zaurus PDA。该解决...

    advBandedGridView自动换行自适应高度

    同时,标签 "devexpress 自动换行 自动行高" 明确指出了这个问题的核心技术点,对于熟悉DevExpress控件的开发者来说,这些都是日常工作中常见的挑战和解决方案。文件管理可能包含了示例代码或者详细教程,帮助开发者...

    jQuery自适应页面手机端抽奖

    在移动互联网盛行的时代,网页设计必须考虑不同设备的适配性,尤其是对于交互性强的元素,如抽奖功能。"jQuery自适应页面手机端抽奖"是一个典型的话题,它涉及到如何使用jQuery这个强大的JavaScript库来实现一个在...

    自适应屏幕代码

    在移动互联网时代,网站和应用的适配性变得尤为重要。一个良好的用户体验往往取决于页面能否在不同尺寸的设备上完美展示。本文将深入探讨自适应屏幕代码,即`&lt;meta name="viewport"&gt;`标签的使用方法及其背后的原理。...

    蓝色优雅社区教堂css模板下载_蓝色 教堂 社区 和平_html网站模板_网页源码移动端前端_H5模板_自适应响应式源.rar

    模板采用HTML5、CSS3技术,具有良好的移动端适配性,支持自适应响应式布局,能够在不同设备上呈现出良好的视觉效果。 首先,我们来详细了解一下HTML5。HTML5是超文本标记语言的最新版本,它在HTML4的基础上进行了...

    蔬菜生鲜超市配送企业官网模板下载1933_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip

    此模板设计精良,具有良好的用户体验,特别关注移动设备的适配性,支持自适应响应式布局,确保在不同尺寸的设备上都能展示良好。 首先,我们要了解这个模板的基础结构。一个HTML网站模板通常由HTML、CSS和...

    修改手淘方案flexiblejs不再根据dpr的多少来缩放使移动端自适应开发更方便

    在移动互联网领域,为了实现网页在不同设备上的良好适配性,前端开发者通常会采用响应式设计。手淘方案flexible.js是阿里巴巴针对移动端自适应布局提出的一种解决方案,它通过动态计算屏幕尺寸和设备像素比(DPR)来...

    H902_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip

    描述部分与标题相同,再次强调了这是个适用于移动设备的HTML5网站源码,设计时考虑到了不同屏幕尺寸的适配性。自适应响应式设计是现代网页开发的重要特性,它允许页面布局根据用户的设备屏幕大小自动调整,以确保...

    手机wrap网站多米音乐高品质MP3自适应手机wap软件模板

    - **定义**:手机Wrap网站指的是那些专门为移动设备优化过的网站,这类网站通常具备良好的适配性,能够根据不同设备屏幕大小自动调整布局和内容展示方式。 - **目的**:提高用户体验,确保在不同尺寸和分辨率的屏幕...

    4G终端和网络适配性问题优化案例河北.docx

    互操作参数包括重选优先级、切换门限等,这些参数的设定直接影响终端在不同网络间的移动行为。不合理或不适应当前网络环境的参数可能导致频繁的网络切换,从而影响服务质量。 2.3 终端互操作主要问题及分析 2.3.1 ...

    响应式个人博客自媒体文章博客资讯类模板源码(自适应移动设备)代码简洁,风格大气高端,页面干净.txt

    随着移动互联网的普及和发展,越来越多的用户通过手机等移动设备访问网页,因此对于个人博客而言,具备良好的移动端适配性变得尤为重要。本篇将详细介绍一款响应式的个人博客模板源码——“响应式个人博客自媒体文章...

    软件工程中的跨平台开发与适配性.pptx

    **适配性问题和解决方案** 常见的适配性问题包括分辨率适配、设备适配等。解决这些问题的方法包括使用响应式设计、流式布局等技术。 **如何平衡跨平台开发和适配性的关系** 要平衡跨平台开发和适配性的关系,...

    自适应响应式少儿舞蹈培训网站模板.zip

    总的来说,这个"自适应响应式少儿舞蹈培训网站模板"是一个集成了先进设计思想和技术实现的解决方案,旨在为少儿舞蹈培训机构提供一个高效、易用、跨平台的网络展示窗口,提升其品牌形象和服务质量。无论是初次接触...

    11个有用的移动网页开发App和HTML5框架.pdf

    MobileESP项目提供了一组API,用于检测访问者是否使用移动设备以及设备类型,这对于优化移动网页的适配性至关重要。 最后,Tiggr是一款移动应用创建工具,允许开发者无须编写代码即可快速构建丰富的移动应用,降低...

    手机号码归属地在线查询触屏版自适应手机wap查询网站模板

    标题中的“手机号码归属地在线查询触屏版自适应手机wap查询网站模板”是指一个专门为移动设备设计的网页应用,其主要功能是提供手机号码归属地的查询服务,并且能够根据用户使用的设备自动调整布局,适应不同的屏幕...

Global site tag (gtag.js) - Google Analytics