移动端与服务器交互方案

移动端与服务端交互

内容简介

本文主要从架构上进行阐述，讲解移动端的开发的两种技术路线，以及移动端如何与服务端进行交互。

移动端开发

移动端的开发主要有两种方式，第一种是基于手机的API开发方式，第二种是基于手机端的浏览器开发方式。首先介绍这两种开发的方式以及优缺点。

1、基于手机API开发

原理：手机端使用手机API，如AndroidAPI，进行开发，服务端只是一个数据提供者，如JSON。手机端接到JSON后将JSON反序列化成对象，进行逻辑处理，再在界面层进行展示。当然你也可以不用JSON，用XML、甚至你自己能读懂的某种字符串如commaString（逗号分割的字符串），虽然这一切都没有JSON在JA V A中来的方便，本文就将使用JSON。这种方式，相当于传统开发中的C/S模式。

优缺点：这种方式的优点在于，手机端开发更为灵活，可以应用手机API提供的所有API，可以对手机进行底层的控制，如：可以使用系统提供的更炫的UI、很方便的使用摄像头、播放视频、拨打电话、调用联系人、发送短信（虽然后三者在android平台用浏览器的方式也可以比较方便的实现，但这里讲的是针对全平台的思路）……这种方式的缺点也显而易见，手机端开发周期长、可移植性差、无法跨平台，即使你之前已经有了很强大的WEB应用，针对手机客户端这部分WEB端也可能要重新开发。

服务器角色：在这种方式中，服务器所扮演的是数据提供者的角色，它处理手机客户端的请求，并将请求通过业务逻辑层的处理生成客户端要求的JSON回发到客户端，于是：视图层仅仅是显示JSON而已，没有Jquery、没有Ajax、甚至没有HTML。

其实这种方式就是开发传统意义上的APK，相当于一个c/s开户端。

2、基于手机浏览器的开发

原理：遵循Webkit的标准为手机客户端开发跨平台的网站应用，这时手机端仅仅是一个包了浏览器外壳的简单程序，这个外壳通过访问Web服务器，获得HTML流，并将HTML用支持WebKit的浏览器控件解析（如Android的WebView），从而实现界面的展现。另外在Android中，还可以“重载”JavaScript方法，获得更接近Android原生程序的用户体验，如将JS中的alert”转换”成Android的AlertDailog，再比如解析链接中的"tel: ”调用拨号界面，等等。但互动效果依然有限。这种方法相当于传统开发

中的B/S模式。

优缺点：WebKit方式的优缺点与API方式更好相反，广义的讲，WebKit无法提供手机原生UI、对手机硬件的控制能力有限，导致程序交互性较差；由于视图层依赖于Web 服务端，所以程序会更加依赖网络，可能更加耗费流量；但WebKit方式的优点同样令人着迷：跨平台、手机端开发周期很短、如果你已经有了很强大的WEB应用，开发WebKit或许就仅仅是做一个新的视图层那么简单。对于最后一点，也许我该多说几句。

对于JSON方式，由于要使用JSON输出，你就要重新构造一个各种类转换成必要JSON 的逻辑，比如我要在手机客户端中显示一个用户的若干信息，我需要让服务器传一个User Json给客户端，那这个JSON就要在服务器重新构造，那怎么构造呢？BLL要改、DAL同样要改，这个不是个简单的事情！当然，你也可以增加一个序列化对象为JSON 的通用静态方法，但这样的方式往往并不是万能。首先通用静态方法只能处理简单的对象，当一个对象中包含另一个需要被序列化的对象，那通用方法则未必成功；又比如，你需要一些转换，比方说username属性，输出时改名为uid（为了给客户端节约点流量嘛），那还是需要为每一个类增加对应的序列化方法，还是要在BLL、DAL动手脚，延长开发周期。

服务器角色：WebKit方式的服务器角色，就不仅仅是数据提供者那么简单，还需要提供完整的HTML视图，似乎看来，相比第一种方式，是加了视图层，但是从某种角度说，添加视图却正好实现了对之前业务逻辑的复用，开发反而更为简单。

总结：1、从界面效果用户体验角度来看，肯定是基于手机的API开发肯定要好。

2、从项目开发速度角度来看，基于手机浏览器的开发要快，直接用https://www.wendangku.net/doc/e83732584.html,开发即可，

移动端只要开发一个版本即可。基于手机的API开发，安卓和苹果需开发两个不同的版本。

3、从人力资源角度来看，基于手机的API开发需要多名精通安卓和苹果的开发人员。

综合考虑，可以采用两种结合的方式。对于界面效果用户体验要求比较高的模块可以采用基于手机API的开发方式，对于用户的订单管理、基本信息管理模块可以采用基于手机浏览器的开发方式。我的上家公司就是采用这种开发方式。

服务端与客户端交互

1、服务端建议采用三层架构，再增加一个WebService层。

2、客户端与服务器交互，分两种情况。

第一种基于手机API开发，交互过程如下：

⑴客户端通过http协议访问服务器的一个页面，http://localhost:8080/api/Login.aspx?name=111

⑵服务器经过处理后，把这个页面生成为仅有json数据的文本流

⑶客户端得到JSON流后，反序列化为对象、业务处理、显示等等。

交互图如下：

交互图如下：

APP手机客户端开发技术方案-完整版

手机客户端技术方案 中国电信集团系统集成有限责任公司内蒙古分公司 2010年5月 手机客户端技术方案 2 目录 述 “． 3 2需求分析 “ 3系统设计目 ． ．4 3．1建设意义 “． 3，2建设原 3．3建设模式 “ 4技术解决方案 “． 4，1移动中间件系统概述“， 4．2系统架 构．． 4．3系统组 4，4移动化原理

4．5中间件服务器配置 “． 5系统功能设 6手机适配型 7配置清单“． 手机客户端技术方案 3 1概述 为了提升企事业单位信息化管理水平，提高各级部门的办公效率，加强单位内部 的执行力、凝聚力，自上而下咼度重视信息化系统的建设工作，实现日常公文收 发审批、工作安排、公告通知等日常办公的统一管理，显的日趋重要。 在当前信息化管理平台的基础上，各企事业单位希望引入移动信息化技术，为相关职能部门及工作人员提供手机移动办公，将办公信息化延伸至使用 人员的手机上，实现随时、随地办公，以便能够推动各级部门的精确化、 高效化管理。 中国电信内蒙古分公司作为业界领先的移动信息化解决方案提供商，己经在区内 成功实施了多个综合办公移动化适配项目。内蒙古电信公司有足够的实力将本系 统建设成为一套精品的移动办公信息化平台 2需求分析 传统的信息化管理系统面临的问题： 1）传统办公的缺陷导致了企事业单位整体对外竞争力的降低、工作效率的 低下、成本的增加。 2）发布通知公告，采用人工或者电话、口头通知方式难免出现疏忽与意外，造成遗漏、延误、缺席等。 需求描述： 定制开发企事业单位移动办公系统，包括以下具体内容：定制开发移动办公手 机客户端系统，包括windows mobile、windows等手机操作系统的手机客户端软件；搭建中间件服务器。 定制要求：

APP在手机移动端的交互设计研究

Software Engineering and Applications 软件工程与应用, 2017, 6(6), 181-187 Published Online December 2017 in Hans. https://www.wendangku.net/doc/e83732584.html,/journal/sea https://https://www.wendangku.net/doc/e83732584.html,/10.12677/sea.2017.66020 APP Interaction Design Research on the Mobile End Aihong Tang Shanghai Normal University, Shanghai Received: Nov. 16th, 2017; accepted: Dec. 1st, 2017; published: Dec. 8th, 2017 Abstract In recent years, with the rapid popularization of smart phones and the rapid development of mo-bile Internet, many things in the WEB side to complete can use on the mobile App to complete. As the number and variety are more and more multifarious, App to the user experience as the starting point of the App designers began to attach importance to its interactive design on the mobile end. This article through the iOS Linkedin 7.0.3 function design, interaction design, page layout, and other products characteristic analysis, summed up the App on the mobile end interaction design implementation method. Keywords Application Program, Interaction Design, Smart Phone APP在手机移动端的交互设计研究 唐爱红 上海师范大学，上海 收稿日期：2017年11月16日；录用日期：2017年12月1日；发布日期：2017年12月8日 摘要 近几年，随着智能手机的快速普及以及移动互联网的快速发展，很多在WEB端才能完成的事情都已经可以用手机移动端的App来完成。随着App数量和种类越来越繁杂，以用户体验为出发点的App设计者开始重视其在手机移动端的交互设计。本文通过对iOS Linkedin 7.0.3的功能设计、交互方式、页面布局等产品设计特点的分析，总结App在手机移动端的交互设计实施方法。

APP交互设计

移动应用产品开发的核心要素 关键词：移动应用产品核心要素开发互联网产品交互简约设计 摘要：一般人都认为移动互联网产品设计相对于Web设计而言剁了许多限制，移动端屏幕就那么点大小，我们可以在Web上使用鼠标+键盘来顺畅的浏览，并且Web设计已经花里胡哨的一塌糊涂，而在手机上只有触屏当道，那么手机上的设计真的要比在Web上的设计更难么? 移动产品与互联网产品最大的区别在于使用环境的差异，这种差异会引申出很多不一样的设计方式。但是不论是web端还是移动端，产品设计的本质是相同的，总结一下，就是简单、清晰、准确。 移动产品设计的核心要素在于几点：充分利用移动设备本身去做设计；更多的去考虑与服务端的交互；简约至上。那么大道理人人都懂，又如何将此核心理念落进实处呢？ 由于移动端的界面大小、可操作区域和web端相比是有很大的减少的，因此，在移动端产品设计上，需要很慎重的减少用户不必要的操作，举个例子，登录，在web端上，帐号、密码可能还有验证码，用户在键盘上操作，比使用虚拟键盘在4寸或更小的触摸屏上的操作体验的差别是很大的，那么是不是可以从机制上建立，老用户只要绑定了手机，在登录验证时就只让老用户确认是自己在使用，就可以把重新输入帐号、密码甚至验证码的操作给简化呢？比如，请老用户回答一下约定的登录问题？ 除此之外。流量是个极其重要的部分，在我国，更多的用户没有使用4G网络，而是无线或直接就是3G的通讯网络，流量费用也不便宜，那么在页面展现上就需要尽可能的减少每次信息传输带来的流量，也就是把传递的信息流量与web端进行适当的拆分和精确传输。 充分利用移动设备本身：相对传统互联网产品而言，移动设备自身提供了很多硬件能力，比如光感、磁阻、陀螺仪、.... 所以，要充分实现与移动设备的深入结合，移动设备自己具有的一些有趣而实用的功能，是PC不具备的，移动端产品设计和web端产品设计的实现方式上，就天生具有了一些很有意思的差异。甚至过去在pc端无法实现的功能和需求可以在移动端上实现。对这些能力的运用是移动产品设计的起点，除此之外还要更多的去考虑服务端的交互。 以上所说核心内容就是更多的限制之中追求更简单的设计。 对移动应用产品开发而言，其更小的屏幕意味着你只需要考虑更少的内容设计； 更单一的交互意味着你只需要思考更简单的信息设计和更单线程的流程设计；更限制性的硬件意味着你不再需要考虑哪些花里胡哨的“假动作”，你只需要关注是否能更快速的帮助用户解决需求就足够了，一般而言，在手机上的产品设计分为2类，从Web端移植功能到手机端、全部由手机端开始设计。这2类设计实际上都适用以下要说的原则。 拥抱约束，习惯在局限下设计。这是一句正确的废话，每个人都知道真正的自由并不在于完全自由，真正的自由在于完全自由与限制性之间的平衡。而这点在手机产品设计上表现的尤为突出。在手机端做设计首先必须要具备的思想就是阉割。 《简单法则》里提到一个方法，SHE：缩小（Sherink）——>隐藏（Hide）——>附加（Embody），然后把这些被简单过的元素有组织的放在一起。

基于移动终端学习工具APP交互界面设计应用测试报告

龙源期刊网 https://www.wendangku.net/doc/e83732584.html, 基于移动终端学习工具APP交互界面设计应用测试报告 作者：姜旬恂郝谨李琦 来源：《科技创新导报》2017年第07期 摘要：这项测试报告的研究目的在于针对现今网络教育普遍使用的手机APP进行调查，了解用户在体验中使用的真实情况。侧重于发现用户交互界面设计应用流程的不足，对应用的操作性及产品内容的数据展开分析，发现其中的问题，为之后课题研究中的改进设计提供可用性测试数据资料。通过用户对该APP的真实体验的描述与反馈信息，对此交互界面设计进行综合评定。 关键词：交互设计互联网教育手机APP 中图分类号：TP311 文献标识码：A 文章编号：1674-098X（2017）03（a）-0123-02 互联网思维和电脑手机不断普及的时代，传统的教育方式在课上授课以外已经很难引起学生的注意，同时也没有解决课下学生学习的问题和一些学生的心理问题。在手机这种工具不断发展的今天，借助手机，结合互联网教育的特色，让学生在课下的手机中依然可以进行科学知识学习和问题的深入探讨。这不但是学生的需求，也是家长和老师共同关注的实际教育问题。这次测试报告的研究用途是为互联网教育的设计和注意方向提供一个参考，研究目前市面上比较流行、下载量高的互联网教育手机APP在实际操作中的优点与缺陷，侧重于对测试用户在交互使用时对界面的识别性与教育性的数据分析，发现其中存在的问题，为之后的课题研究中的改进设计提供可用性测试数据材料。通过对交互界面信息系统真实模拟界面的模拟操作，采用信息设计的研究方法进行有效测试，根据被测受众的描述和体验反馈信息，对此用户交互界面设计的识别与互联网教育进行综合评定。 1 APP版本 《咪咕学堂》2.9.3。 2 硬件平台 型号：SM-N9100 Android版本：5.1.1 Android安全补丁级别：2016-06-01 基带版本：N9100ZCUICPBI

移动界面设计分析

移动界面设计分析 随着信息化的来临，产品自身的信息化属性也越来越健全，根据人们日常的需要，设计师们在产品的设计方面需要考虑到人机的交互。科技的日益进步促成了计算机的发展，可以遥控停车的全自动汽车、可以远程控制开关的家用电器等，这些电子产品的快速发展是大家有目共睹的。手机作为日常生活中最常见的个人电子产品的终端，集娱乐、资讯、生活于一体，其终端性质决定了手机在人机交互界面上更加功能集成化、人性化、趣味化等。随着电子科技技术的飞速发展，手机的功能也得到了迅速拓展，通讯功能不再是其唯一的重要功能，随着信息技术与网络技术的融合，手机的交互方式发生了很大的变化，其交互界面也更加多样化。针对移动应用的界面设计也已成为人机交互技术的一个重要研究领域。移动界面指的是通过手机平板等移动终端设备呈现的用户能够体验到的图形形态，主要表现为移动应用平台。而由于移动设备的便携性，置不固定性和计算能力的有限性，以及无线网络的低带宽，高延迟等诸多的限制，使得移动界面设计又存在着自己的特点。 首先，先谈谈移动界面存在的许多限制和特点吧。 1．资源相对匮乏 由于受到成本，能耗以及移动性的要求，移动设备往往计算能力比较差存储容量较小，显示屏幕小，分辨率低。例如，一般网站的默认分辨率可达1024*768，而手机的显示分辨率也不过320*240因此，手机只有通过设计专门的浏览器才能直接访问一般的网站。其次，移动界面比桌面系统的用户界面更加简单。桌面系统用户界面采用的一般是并行展示各种选择可以在一个大小可调的屏幕中同时显示出来，而在移动界面中，用户需要逐屏逐页寻找合适的选择，当选择过多，就会给用户带来不便，从而引发用户不满意。因此，移动界面设计的难题就是如何在有限的资源条件下有效地为用户提供信息服务，提供的选择必须根据重要性排列。 2．移动设备的种类繁多 由于移动设备的种类极其繁多，软硬件平台规范各不相同，互相之间的兼容性不是太好，其计算能力、储存能力以及声音效果等也千差万别，使得在开发移动应用时很多情况下需要专门针对某一

移动平台UI交互设计与开发-教学大纲

《移动平台UI交互设计与开发》课程教学大纲 课程名称：移动平台UI交互设计与开发课程代码： 适用专业：软件技术 课程类型：职业知识必修课 学时数：72（24+48）学分：4 执笔人：审核人： 一、课程的性质和目的： 《移动平台UI交互设计与开发》是围绕软件技术专业培养目标而设置的职业知识必修课程，是高职计算机相关专业的一门重要职业技能课程，该课程是在学生必修完成《计算机应用技术》、《计算机平面设计》、《计算机UI设计理论基础》、《计算机UI设计与制作实训》等课程后，根据手机UI界面设计师岗位任务要求设置教学内容，进行专业核心技能综合性训练的重要专业技能课程。《移动平台UI交互设计与开发》是一门融“教、学、做、评”于一体的项目化课程，通过本课程的学习，使学生具备本专业高素质技能型人才所需要的手机UI设计与开发能力，为学生毕业后从事手机等移动设备应用软件的界面设计与开发工作奠定基础。 本课程是一门实践性很强的课程，上机操作是必不可少的实践环节，通过“够用”的理论知识和真实实践项目相结合，使学生熟悉手机UI创意、设计、开发和调试的全过程，加深对手机界面设计的理解，获得手机界面设计方法和开发技巧的基本训练，从而使学生能零距离的接触企业真实项目。 二、教学目标和基本要求： 教学目标： （一）知识目标 1、了解手机UI设计技巧、设计哲学和考量、UI框架特性和新的UI设计模式。 2、熟练运用Photoshop等图像处理软件知识进行手机UI交互界面创意和设计。 3、熟练运用Android系统中的界面布局、UI视图、TextView等常用控件以及基于监听和回调的事件处理机制开发。 （二）能力目标 1、熟练掌握图像绘图工具进行手机UI创意、设计的方法和技巧。 2、熟练掌握在Android手机操作系统下开发功能机、智能机UI交互界面。 （三）素质目标 1、具有团结协作、勇于创新的精神。 2、具有吃苦耐劳的工作精神和严谨的工作态度； 3、具备良好的服务意识和市场观念； 4、具备精益求精的工作态度和敬业精神。

《移动应用UI设计模式》读书笔记

《移动应用UI设计模式》读书笔记 主导航模式 由于移动桌面尺寸限制，瞬时导航很好的体现了打破框架、突破画布的思想。通过3D图层面板和手势交互创造极佳的用户体验，将内容层、菜单层、详细页层叠起来的方式。 1、何时使用全局导航： 应用层次扁平化、菜单分类是同级、主要类别只有3到5个。 用户需要菜单一直处于可见状态以便快速访问。 菜单分类有状态指示，比如未读邮件数。 跳板式 1.1跳板式 也成为启动面板，是2011年最流行的导航模式，指的是一个带有菜单选项的登录界面，而菜单选项就是进入各个应用的起点。 优点：可以容纳更多选项。 缺点：全部选项被扁平化，没有优先级。 1.2卡片式 卡片式模仿的原型是扑克牌，切牌、换牌的手法。在苹果的切换运行应用中也使用了卡片式，在谷歌now中。他给出了一种展示内容的优雅方式。 1.3列表菜单式 每一个列表都是进入该应用各项功能的入口，并且模块之间的切换需要返回到列表主页。在设计层级结构的应用导航中可以考虑列表菜单模式。

1.4仪表盘式 在需要使用关键指标或数据作为应用入口的时候，可以采用仪表盘式。但不要载入过多的信息，对于要展示的关键指标或数据需要经过仔细的研究再做决定。 1.5陈列馆式 可用来呈现实时内容，比如新闻、菜谱、或照片。可采用网格布局或轮盘布局。 字幕式的文本比浮层式的文本更清晰易读。陈列馆式的设计模式最适合呈现经常更新的、视觉效果直观的无层级内容。 1.6选项卡菜单 IOS标签栏的作用是在应用的主要类别之间进行切换；而工具栏上显示的是工具或指向特定页面的可执行操作。 IOS系统中的标签栏限制在5个以内，如果应用的主要类别超过5个，那么你可以把“更多”放在最右侧的第五个选项卡上。在扁平式信息结构的应用中，因为所有的主要类别都可以从主页进入，所以用户可以直接从一个主要类别切换到另一个。 Instagram针对进行单一操作的用户（拍照）所以他们把行为召唤放置在标签栏上。 安卓系统主导航提供三种不同选项卡模式： 固定选项卡：固定选项卡同时显示多个顶级内容视图，可以方便在不同视图间进行切换。固定选项卡会一直显示在屏幕上，始终允许用户通过在内容区左右滑动切换不同界面。 下拉菜单 导航抽屉 在以下场景中使用选项卡： 预计用户会经常切换视图 顶级内容视图最多3个 你想让用户清楚地知道有可供选择的视图。 1.7新生模式 在用户滚动屏幕活动页面时将网站头部隐藏或是收缩起来。 折叠选项卡：用户向下滑动浏览内容时，把工具栏收起来。在向上滑动时将工具栏重新显示出来。 可配置选项卡：通过模仿浏览器标签页效果，用户可增添选项卡可对选项卡排序。 侧边栏不太可能被用作全局导航模式的元婴： 1、大多数人是竖屏使用手机，侧边栏占用相当多空间。 2、因为空间限制，所以文字标识常常被去掉，降低了应用的可用性。

谈谈移动端屏幕适配的几种方法

谈谈移动端屏幕适配的几种方法 文/腾讯莫振中 移动端web开发相对于PC端web开发，我们可以庆幸不用兼容那么多浏览器了，但是随之而来的却是各种屏幕尺寸的适配，个人觉得，比PC端还要费精力。在使用了腾讯优测进行软件测试后，问题得到了有效解决。 响应式布局 简而言之，就是页面元素的位置随着屏幕尺寸的变化而变化，通常会用百分比来定位，而在设计上需要预留一些可被“压缩”的空间。 如上图，其实就相当于页面被压矮了。 Cover布局 就跟background-size的cover属性一样，保持页面的宽高比，取宽或高之中的较小者占满屏幕，超出的内容会被隐藏。此布局适用于主要内容集中在中部，边沿无重要内容的设计。

如上图，第一张是原设计稿，第二张把左右隐藏掉了一部分，第三张则是把上下隐藏掉了一部分。 Contain布局 同样，也跟background-size的contain属性那样，保持页面的宽高比，取宽或高之中的较大者占满屏幕，不足的部分会用背景填充。个人比较推荐用这种方式，但在设计上需要背景为单色，或者是可平铺的背景。

如上图，红框部分为原始宽高比，根据不同屏幕尺寸进行缩放，并加背景填充。 好了，接下来再说说常用的实现方法吧。 样式缩放 最省事的适配方法，直接用px为单位按视觉进行开发，然后通过计算屏幕与网页的宽高比，用transform:scale来对网页进行全局缩放。 不过此方法会有一个小问题，就是如果网页内有动画的话，缩放后会稍微降低页面性能，在低配的安卓机器上表现的比较明显，iOS上没发现有性能问题。 Rem缩放 Rem是个好东西呀，谁用谁知道，这里就不多做解释了。原理跟上面的样式缩放相通，只不过是通过Rem为单位来进行视觉开发，然后通过计算后改变html的front-size来对页面进行缩放。 关于以Rem为单位进行开发，目前比较流行Font-size=62.5%，而后1rem=10px 的这种方法，有试过直接换成px也是可以的，就看个人的计算习惯吧。

移动端网页大小自适应的实现方法

移动端网页大小自适应的实现方法 下面小编就为大家带来一篇移动端网页大小自适应的实现方法。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。 目前比较常用的方法有： ?首先要让页面大小铺满屏幕又不能溢出。只需要在html标签内加入viewport （如下），参数分别表示：页面宽度＝屏幕宽度，最大和最小伸缩比都是1，不允许 用户拉缩。 1. ?百分比自适应：把长度单位转换为百分比来表示，这样在不同的宽度下，元素的长宽也会随之变化。 优点：宽度之间无缝衔接，操作起来也相对比较方便。 缺点：字体大小需要另外一套自适应方法来调整；当屏幕宽度大于700px后，继续按 照百分比元素会偏大，这个时候调整起来会比较麻烦。 ?rem、em自适应：用媒体查询的方法，确定在不同屏幕宽度下，改变或 的fontsize。再用rem, em替代 px作为单位实现自适应。 优点：可以根据不同屏幕宽度来设置，可以完美解决上面说的屏幕偏大时的比例问题。字体的大小也不存在问题。 缺点：根据宽度区间来设置，无法实现无缝变换。

-------------------------------------------------------------------------------- 这些兼容方法各有优缺点，都不算完美，怎样才能把优点结合在一起，同时避免缺点呢？ 在参考淘宝网的自适应方法时，偶然发现页面的fontsize会根据屏幕的宽度自动调整，而且屏幕宽度和所设字体大小的商是一定的。 于是猜想它是用JS获取屏幕宽度后，按照固定比例缩小后作为rem的单位长度实现自适应。 这不就是优点全有滴解决方法吗！？请容许我激动一下下(☆_☆) -------------------------------------------------------------------------------- JS代码写起来非常简单，而且完美解决了用rem来设置无法达到无缝衔接的问题。 但移动端测试后问题就出现了，移动端safari在html加载完毕之前将JS以迅雷不及掩耳盗铃之势执行了，在页面没有按照viewport设置好宽度前，JS就读取了错误的宽度，导致元素变成原来的两倍大0^0, 需要用setTimeout()解决问题。 -------------------------------------------------------------------------------- 最终代码 1.Zepto(function($){ 2. var win = window, 3. doc = document; 4.

移动设计指南!界面交互方法与技巧超全总结

移动设计指南！界面交互方法与技巧超全总结（二） 编者按：恶补交互基础知识第二版来咯！昨天刚出炉那篇关于交互信息架构的好文还温热着，不过为了同学们尽快完善交互知识体系，@王笑Nothing趁热打铁把第二篇也译过来了，全文结构清晰，语言无比晓畅， 插图全是私货，进来给你的梦想加点料吧！ 私货重要，经验也不要放过呦！《交互设计师修炼指南！教你从零开始成为优秀交互设计师》 我的第一个手机是Nokia 5110（1988年买的），它的功能非常少，所以我只用它来打打电话、玩玩贪食蛇。但是随着厂商不断的技术革新，传统手机使用方式被完全颠覆了。现在我们都在使用大尺寸的触屏手机，并且出现了“应用商店”的新型平台。设计师也受益于这个时代，所以尽快掌握移 动设计模式也成了我们的责任和义务。 欢迎阅读《移动设计指南！如何理解移动交互？》，正如你所见，系列文章的第二篇。为了方便您的阅读，我在这里会交代一些《移动设计指南！ 如何理解移动信息架构？（一）》的背景。第一篇文章中指出：设计师在移动设计面临的挑战主要有：观察使用环境、用户行为和情绪。因为这些差异会很大程度上影响我们的设计思路和研究过程，最终将会导致产品的形态。 第一篇文章讨论了如何在移动环境下进行信息架构探索。做好第一点将会为接下来的设计流程打下良好的基础。在继续讨论交互理论前，非常有必要先让大家了解一下，移动设备的交互理念与桌面设备究竟有何差别。 “设计”交互 现今，绝大多数移动设备使用触摸屏，这对我们来说有好有坏。我们不仅可以使用设备来浏览内容，并且还可以与之交互。这就要求设计师考虑人体工程学，不停地模拟用户握持和操作手势，最终才能得出可用的交互模式。

HTML5移动页面自适应手机屏幕的方法有哪些

HTML5移动页面自适应手机屏幕的方法有哪些 本篇文章小编给小伙们分享一些HTML5移动页面自适应手机屏幕的方法，对HTML5开发感兴趣或者是想要学习HTML5开发的小伙伴们，对于HTML5移动页面自适应手机屏幕的技巧还是需要掌握和了解的。下面就和小编起来来了解一下吧。 1、使用meta标签：viewport H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。 viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。 手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。 viewport标签极其属性： 每个属性的详细介绍：

2、使用css3单位rem rem是CSS3新增的一个相对单位（root em，根em）,使用rem为元素设定字体大小时， 是相对大小，但相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。 目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子： p {font-size:14px; font-size:.875rem;} 默认html的font-size是16px，即1rem=16px，如果某div宽度为32px你可以设为2rem。 通常情况下，为了便于计算数值则使用62.5%，即默认的10px作为基数。当然这个基数可以为任何数值，视具体情况而定。设置方法如下： Html{font-size:62.5%(10/16*100%)} 具体不同屏幕下的规则定义，即基数的定义方式：可以通过CSS定义，不同宽度范围里定 义不同的基数值，当然也可以通过js一次定义方法如下：

如何解决PC端和移动端自适应问题

如何解决PC端和移动端自适应问题？ 做网页时，我们通常需要考虑到不同电脑屏幕尺寸，以及不同手机屏幕大小等问题，解决样式发生改变的情况，那么如何解决呢？现在主要是采用自适应来解决高度，宽度的，以及图片自适应问题，下面就PC端和移动端来总结一下，通常进行自适应高度和宽度，图片时，一般与页面的布局存在关系。 1、最小尺寸分辨率1024*768（传统17寸显示器），则可以采用940px、960px、或者常用的980px作为最小宽度 2、1024*768之后稍大的分辨率就是1280*768了，则可以采用1200px或者1220px作为稍大的网页宽度 3、支持css3、html5的高级浏览器可以利用CSS3 Media Queries让网页在不同分辨率下自动调节布局标签 4、不支持css3、html5的脑残浏览器特别是<=ie8系列则需要用js以及resize 事件来控制html的布局标签宽度了 5、宽度自适应需要对每个显示模块进行不同宽度的计算，在做html布局时需要大量的计算与适配。 6、宽度自适应为不同宽度显示器写布局元素时常用的css 下面我们看下，如何用js和css来自适应屏幕的大小。 一：了解高度和宽度的基础 下面用图片来说明：

网页可见区域高宽为：document.body.clientHeight||document.body.clientWidth 网页正文的区域高宽为： document.body.scrollHeight||document.body.scrollWidth(包括滚轮的长度) 网页被卷去的上左区域：document.body.scrollTop||document.body.scrollLeft 二： css自适应高度 1.两栏布局，左边固定，右边宽度自适应 方法一： //html部分

//css部分 *{margin:0;padding:0} #left{float:left;width:200px;background:red;} #bodyText{margin-left:200px;background:yellow； 方法二： //html部分