⑴ 前端开发时遇到过什么坑尤其是webapp开发时
过去，应用开发需要注重大量的专业知识，程序员只需关注单一的语言（比如COBOL、RPG、C++等），并利用该语言创建应用。Web不再是单单关注独立的一面。相反，一个现代化的Web应用开发者应该是“样样精通”。他们不仅要理解开发方面还要明白Web应用安全漏洞问题，了解如何与其他设备集成在一起等等。往深了说，他们还需要了解这些应用程序是如何运行在平板电脑和智能手机上的。
换句话说，Web应用开发正变得更加复杂化。它迫切需要一个不断增加以及不断发展的配套技能。
掌握六大技能后，估计Web应用开发时候就会避免一些坑。
1. 安全
过去，企业在内部安装应用，基于防火墙背后的应用无法与第三方服务或应用进行通信。而随着软件的发展，现代Web应用能够与其他设备进行集成，并存储在云服务器上或者访问多种类型设备。因此，安全问题显得尤为重要。
“作为一名应用开发者（web/desktop），深入理解应用程序的安全性是最为重要的技能之一。”Veracode首席安全顾问Stephen Jensen说道，“在当今世界，有关安全问题的新闻不绝于耳，大多数是揭露数以百万计的人们的敏感信息。因此，Web应用开发者必须知道如何预防常见的漏洞，比如Cross-Site Scripting (XSS)，SQL注入等。为了确保应用在创建过程中免受安全问题的恶意攻击，同时也为了保护用户潜在的敏感信息问题，这也是所有开发者应当学习的必备基础技能。”
2. 用户体验（UX）设计
“随着移动设备用户需求量的不断增加，开发者需要充分理解用户体验设计显得愈发重要。”Raster Media CEO Michael Smith说，“设计团队单独负责某款应用的用户体验的日子已经一去不复返了。开发者必须考虑互动、动画、速度以及各个APP之间的通信等问题。”
我完全赞同这一观点。用户体验设计有几大重要因素，首先，用户的期望有所上升。用户下载一款新的应用，他们想立即知道它是如何运行的。他们希望从业务应用中获取相同的体验。其次，用户有选择的余地。如果不喜欢这款应用，他们会寻找另一款代替。由于用户的期望值增加以及竞争的加剧，更为直观的界面需求比以往显得更加重要。
3. 自适应/响应式设计
谈及UX设计，Web App开发者必须建立可随处运行的应用程序。现在的问题不再是“用户如何与我的应用进行交互？”而是演变成“用户与我的应用如何在每款设备类型上进行交互？”
想要做到这一点并不容易。你必须回答以下这些问题：“智能手机上的按钮设置在哪里？你如何在小屏幕上格式化数据表？当设备从人像模式切换至风景模式会发生什么？”总之，Web开发者必须知道让Web应用适应不同屏幕大小的方法。
针对跨平台/设备，响应式设计和自适应设计主要两大方法：
响应式设计使用流体网格以及CSS3媒体查询来适应各种屏幕大小/类型上的应用。你可以通过Web找到各种响应式设计案例。例如TheNextWeb就是个典型的案例。你会发现，当你调整浏览器大小时，该网站会自动适应新的尺寸。
自适应设计根据不同的设备提供不同的HTML页面。比如，一款独立的Web应用可能需要3个独立的表示层（HTML）：一个是PC端，一个是平板电脑，另一个则是智能手机。例如，在不同的设备上访问Web App，外观和行为显示的均各不相同。
那么哪一种方法最好呢？我想说它们有各有各的优势。响应式方法对于Web网页设计以及Web应用信息来说是个不错的选择；而自适应方法可更好的适用于数据驱动Web应用，尤其是包含那些数据表的应用。为什么？这是因为它让开发者能够更好的控制数据结构和样式，而不是试图去适应多种屏幕尺寸上的单个表格，自适应设计方法可让你为每款设备创建不同的表单。
4. JavaScript
开发者总会为他们选择的编程语言而争论。你无法说服一个Java程序员称赞PHP是最好的，反之亦如此，就像你也无法说服一个PHP程序员赞同Java是最好的，但在Web应用中开发者大多数会选择使用JavaScript。
“随着移动和Web桌面应用的发展，JavaScript已快速成为最为重要的计算机语言。” Coordinato创始人Ben Bakhshi表示，“不少业内人士认为利用JavaScript编码将在未来10年内显着增加。”
5. Web应用架构
在Web开发上，应用架构变得比以往更加重要。应用体系架构直接影响到应用可扩展性、灵活性，以及集成其他Web服务和应用的能力。如果开发者想要创建一款有用的、可持续性的应用，那么理应深刻掌握Web应用架构知识。
“Web应用开发者应该充分关注Web应用架构”，MRC软件开发经理Tyler Wassell说，“开发者应该了解，所开发的应用程序如何与所有系统组件进行交互，以及底层架构将如何影响诸如可移植性、可维护性、可用性等性能情况。”
6. API集成
现如今，API已发展成为Web开发一个重要的方面。从本质来讲，API让不同的Web服务之间相互通信。开发者可以通过其他应用/服务上调用数据创建应用。
SimpleCollegeRecipes网站创始人兼CEO Brendan O’Connor认为，“API集成已成为现在Web应用开发者必备的技能。API允许你从其他网站上整合内容和信息。可以说，API使人人受益，包括终端用户，API供应商以及程序员自己。”
总结：
Web应用开发正在不断演变，Web开发所具备的技能也在不断更新变化中。开发者唯有不断进取、学习新的知识才能在开发行业中站住脚。当然，想要掌握每一种Web（移动Web）技能，几乎是不可能的，大部分公司无法为员工给予Web以及移动开发方面不同的解决方案，不可能做到面面俱到。
⑵ ios端对webapp注入javascript时需要注意哪些细节
. 必须要适配所有的智能手机设备
移动设备的屏幕是各式各样的，对设计影响较大的主要是屏幕分辨率、尺寸、屏幕方向这些因素。现在的iOS设备有320×480，640×960，1136×640，1024×768，2048×1536这些分辨率，3.5寸、4寸、7.9寸、9.7寸这些尺寸等，未来还有更大的尺寸。
所以，需要解决Web app在不同屏幕下的界面适配问题。
最佳解决办法有2个：
1、在写前端页面的时候，css 采用100%布局
2、采用html5技术来布局开发。
1.1 适配不同分辨率
通过响应式网页的设计方法提升页面在不同分辨率下的兼容性：
由于手机屏幕尺寸下，一般来说只能一个模块一个模块地从上到下排列。此时设计者就需要考虑模块摆放的优先级了。一般来说，用户重点关注的、最近更新、与用户相关的信息应该放在前面。
另外最好以主流分辨率480×800进行设计，对略高于和略低于该分辨率的屏幕可将界面元素进行缩放，对间距、边距进行适当调整。
所以，在设定容器、图片、文本框的宽度时最好避免使用px单位，使用%可使页面在不同分辨率屏幕下保持布局和页面结构不发生改变。
1.2 平板电脑
使用CSS3的媒体查询(media query)语句可获得浏览器的高宽和设备的像素比，并可根据开发者的需要对不同的设备应用不同的样式表。所以开发者可以控制一个页面在不同设备上的表现。
由于手机屏幕和平板电脑的屏幕尺寸和像素都相去甚远，所以为了充分利用平板电脑的大屏优势，以获得良好的用户体验，最好在两种设备上使用不同的界面布局。相信iOS用户都有这样的感觉：有的App只适配iPhone，在iPad上运行则无法布满屏幕，只能点“2X”按钮显示一个粗糙的界面。还有一种App可同时兼容iPhone和iPad，在手机和平板的屏幕上都能完美显示，用户也无需单独下载两个版本。很明显，后者使用起来更方便，更美观。
Mobile Web App使用媒体查询功能即可实现这种功能。那么在平板电脑上，有哪些需要注意的设计点呢?
因为平板电脑多在横屏下使用，所以使用分栏视图可在一个界面内显示两个层级的内容，方便用户快速切换item。
首页多以宫格视图、Tab为主，微博、QQ这种以内容为主的界面将分栏视图作为默认首页也是可以的。在手机上最常使用的list在平板上就不是很常用了，整个屏幕显示list，不仅浪费空间，也没有分栏视图的操作高效。
需要注意的是，IE9以下的浏览器不支持media query.
1.3 横竖屏切换
由于目前还不能在webkit内核里禁止设备方向的旋转，所以如果用户的设备开启了屏幕方向根据重力自动旋转，那么运行于浏览器的Web App也是会跟着旋转的。
如果能够捕捉到设备的方向，可以对横竖屏分别进行布局设计，但最好能保证界面风格和样式不会有大的变化。
反例就是iPhone的音乐App，在竖屏下会显示歌曲list，但是切换到横屏下显示专辑封面。两种界面风格跳动太大会导致部分用户不适应，以为是两个不同的页面。计算器App也只有在横屏下才显示科学计算模式，竖屏下用户根本无法切换到该模式，连引导也没有。
宫格视图是横竖屏切换最平滑的布局，看看iOS系统的主屏幕就知道了。一个个应用程序图标在横竖屏切换时，几乎只是图标旋转了一下方向。
还有一点就是切换到横屏时，可自动进入全屏模式以显示更多的内容。否则标题栏和底部栏将会占去很多空间
2.WebAPP的交互动效
受浏览器性能影响，很多Native App能实现的华丽动画在Web App项目里的表现并不是很好。所以应该果断去掉非必要的动效以保证Web App能够运行流畅。
因为很多动效会对用户起到很好的引导作用，如果没有这些动画，可能会导致用户对界面逻辑关系的理解产生混乱。这就对动效的设计提出了较高的要求。
总结了一下Web App的几点动效设计原则：
●尽量不使用不必要的动效。
●优先使用简单的动画。如平移、缩放。尽量避免使用3D动画。
●避免刷新页面。因为整个页面白屏，浏览器走进度条的体验会给用户浏览网页的感觉，而不是在使用app
●框架元素优先显示。只在内容加载区域显示loading动画
●避免跳变。在不影响性能的情况下，可尽量用缩放和平移动画，保证用户视觉焦点的延续性和理解的延续性。
●同类界面/对象，同层级界面/对象的动效保持一致。可帮助用户理解产品架构和导航逻辑。
●高层级界面的动效对应高级物理位置。如果左右平移的动画是用来切换上下一层级，那么首页应该是在最左边，如iOS。如果前后切换的动画是用来切换上下一层及，那么首页应该是在最上面，如Windows Phone。
3.WebAPP的内容布局和APP的风格要保持一致
讲导航和信息内容布局的文章众多，Mobile Web App既然要实现Native App的操作体验，照传统的移动客户端的设计模式去设计即可。只需要记住你设计的Web App需要运行在iOS, Android, Windows Phone等多个平台，多种设备上即可。
由于iOS相比其他平台，没有back按键，所以在iOS上运行需要保证界面内的导航能够实现闭环。所以Android上有些操作可以通过Menu键唤出，但是在iOS上就需要直接暴露出来。
下图左侧是Zaker的Android版，右侧是iPhone版。Android版的菜单栏需要点击Menu键才出现。
4.善于使用Native App的UI相关控件
使用Native App的UI控件，可以让Mobile Web App更有Native App的操作体验。常见的如Badge，Back button，Bubble，Picker，Indicator，Title bar，Dialog，Toast，Loading，Drap down to refresh，Notification等。下图分别是Facebook的Native App和Web App，由于后者使用了客户端常见的一些UI控件，所以用户很难从视觉上识别出后者是Web App.
避免使用传统的Web UI控件，如面包屑、文字链：
另外，在控件尺寸上也应该像Native App那样提供尽量大点击区域的控件。参照经验和各平台的官方人机界面指南，可以知道适合用户手指点击的尺寸应该在7-9mm之间，不能小于7mm。相邻点击控件的行距不应小于2mm。
5. WebAPP后期需要针对浏览器进行优化
为了兼顾浏览器的性能和交互，需要注意以下几点：
●页面使用尽量少的DOM元素;
0
posted @ 2015-04-08 18:16 小强好吃 阅读(16) 评论(0) 编辑 收藏
⑶ 设计出来的webAPP页面 与 前端实现尺寸怎么算,
等比例缩放，设计时就按照iPhone比例来
⑷ webapp设计稿720怎么切
目前我做设计稿的设计尺寸，IPhone6的尺寸，向下可以适配4，5，向上可以适配6 plus；我记得IP6推出后，我问总监应该用什么尺寸设计，他说用IP6的吧，好适配，切出来就是@2x了，改一改上下都能照顾到。
推荐做设计稿的时候使用IPhone6的尺寸进行设计。
IP 6的尺寸相比于IP 5来说，很多系统控件尺寸并未变化，只是高度也就是内容显示区域发生了变化。下面是IPhone 6的空白文档，我建立了参考线。
文档建立之初就设置好参考线是个很好的工作习惯，我希望更多的设计师可以养成更好的工作习惯。
上下的参考线很容易设置，因为是根据IPhone自身系统设置的，左右的参考线我习惯设置为24px，也就是显示内容距离边框的距离。这不是绝对
的，我和总监研究过，究竟是设置为左右30px还是24px比较好，通过对国内国外各种APP的对比，觉得24px更适合一些，不宽不窄，这个完全是设计
师个人的设计习惯，所以不要当成什么规范，确切的说，整个屏幕你都可以随便做，但是我们这里说的是正常页面。
⑸ html5做手机app和做手机网页一样吗
不一样，需增加自适应标签来保持一样。
代码如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
解释：Viewport指用户网页的可视区域，content中的“width”指的是虚拟窗口宽度，上面代码意为虚拟窗口/页面宽度初始比例为1，最小比例为1，最大比例为1，用户不可扩展，页面不可缩放。
(5)webapp设计尺寸扩展阅读：
HTML5的事件属性和异常处理
事件属性
HTML 5 元素可拥有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个HTML 5元素时启动一段 JavaScript。下面列出的事件属性，可以把它们插入 HTML 标签来定义事件行为。
HTML 5 中的新事件属性：
onabort， onbeforeunload， oncontextmenu， ondrag， ondragend， ondragenter， ondragleave， ondragover， ondragstart， ondrop， onerror， onmessage， onmousewheel， onresize， onscroll， onunload。
⑹ 如何保证ios webapp启动图清晰
iOS中的safri浏览器可以将一个网页添加到桌面，当做一个独立的应用运行。
当然，这里我们不讨论怎么去做一个webApp，这需要html5的相关知识和开发经验。
这里我们只讲webApp添加桌面后到启动的相关细节。
全屏显示：
<meta name="apple-mobile-web-app-capable" content="yes" />
系统顶栏的颜色(黑色和白色)：
<meta name="apple-mobile-app-status-bar-style" content="white" /><meta name="apple-mobile-app-status-bar-style" content="black" />
桌面程图标(如果不设置，则图标会显示网页的截图)：
<link rel="apple-touch-icon" href="icon.png" />
但是，iOS会自作多情的给这个图标加上高光，如果想图标不被高光，可以这样：
<link rel="apple-touch-icon-precomposed" href="icon.png" />
如果想给不同的设备匹配不同的icon，可以加上size属性：
<link rel="apple-touch-icon" size="72x72" href="icon-ipad.png" /><link rel="apple-touch-icon" size="114x114" href="icon-iphone4.png" />
程序启动的过程中，需要指定启动画面，否则，白屏或者截图是让人很不愉悦的。
iOS有ipad和iPhone/ipod touch之分。
ipad的启动画面是横竖屏分开的，画面的尺寸必须是1024*768、768*1024。
iPhone和ipod touch虽然都是竖屏的，但是却有Retina屏幕和非Retina屏幕之分；另外它们启动画面的尺寸并不是屏幕的大小，而是(屏幕宽度)*(屏幕高度-20)。也就是说，非Retina的尺寸为320*460，Retina屏幕的尺寸为640*920。
引入启动画面是支持媒体查询的。
因此，可以通过media query给ipad的横竖屏引入不同的图：
<link rel="apple-touch-start-image" href="landScape.png" madia="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape)" /><link rel="apple-touch-start-image" href="portait.png" madia="screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portait)" />
但是媒体查询却搞不定Retina屏幕，所以通过js来hack：
给普通的分辨率引入320*460的图片：
<link rel="apple-touch-start-image" href="start.png"media="screen and (max-device-weidth:320px)" />Retina屏幕js:if((app.device.type === "iPhone" || app.device.type === "iPod") && app.device.version >= '5' && window.devicePixelRatio >= 2){$('head').append($('<link rel="apple-touch-startup-image" href="start-640-920.png" />'));
}
⑺ 移动webapp前端ui用哪个框架好
WeUI
WeUI是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。
Frozen UI
Frozen UI是腾讯社交用户体验设计 － 增值UI开发团队一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件，
做成手Q公用离线包减少请求，升级方式友好，文档完善，目前全面应用在腾讯手Q增值业务中。
FrozenUI提供的CSS组件是目前QQ会员前端开发组所用的通用样式库。遵循手Q样式规范，基本样式使用离线包的方式减少请求，并提供快速接入的方案。
FrozenUI提供的一系列JavaScript插件，更优雅地在移动端上呈现更灵动的动画效果。
FrozenJS 是针对移动端开发的 js 组件库，其依赖 zepto.js 和 FronzenUI。
FrozenJS 的所有组件均以 zepto 的插件的形式存在。
阿里开源的SUI Mobile
SUI Mobile
SUI Mobile 是一套基于 Framework7 开发的UI库。并参考 Ratchet、Fastclick 开源库。它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App。
轻量的UI库 SUI Mobile 非常轻量，核心库压缩Gzip后的JS、CSS网络传输体积总共只有52K，却提供了20+个常用的组件。
对于只有HTML&CSS的组件，你只需要复制HTML代码既可以使用。他的大部分JS组件都是独立的 Zepto 插件，并且提供了Zepto/jQuery 风格的API，你将会非常熟悉这种方式。
开发团队：阿里巴巴共享业务事业部UED团队
网络系
GMU
GMU是基于zepto的mobile UI组件库，提供webapp、pad端简单易用的UI组件!
Jingle
Jingle是一个SPA(Single Page Application)开发框架，用来开发移动端的html5应用，在体验上尽量去靠近native应用，希望有一天html5能够做到与native一样的操作体验。
丰富的UI组件提供了按钮、列表、表单、弹出框、轮换、上拉/下拉、日历等各种移动端常用的组件，简单适用，
前后端分离支持前端模板渲染，模板按需自动加载，完善的事件机制。
轻量级基于Zepto开发，依赖了iscrol
purecss
purecss采用其Grid的部分即可，需要定制的部分，建议自行配置，或者是直接采用grid.css，grid960.css这样的栅格来处理。Purecss小的没有节操，全部模块gzip压缩后才 4.4KB* 。 考虑到移动端，保持文件尽量小对我们来说非常重要，每一行CSS都经过深思。如果你只用部分模块，简直小的忽略。
Pure基石,Pure基于Normalize.css添加了HTML元素的布局和样式，以及常用的UI组件。全是精华，木有糟粕。
移动端是初衷,Pure是响应式的盒子模型，适应所有尺寸的屏幕。通过皮肤生成器可以自定义样式。
写出你自己的样式,Pure提供最基础的样式，鼓励你基于此写出自己的样式。它被设计为容易覆写，且不影响你自己的样式。
ionic
基于angular2，丰富的UI组件，大大改进的编程模型，非常适合快速开发。
jquery mobile
jQuery Mobile 是创建移动 web 应用程序的框架。
jQuery Mobile 适用于所有流行的智能手机和平板电脑。
jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。
Bootstrap
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
wex5
国产的ui，支持打包。
前端UI：完全恪守html5+css3+js，干净纯洁设备api：采用业界主流Phonegap/Cordova
向导、模板：简单定义，即可轻松制作向导和模板
主题、样式：海量bootstrap资源引入和定制
UI组件：纯H5+CSS3，轻松引入第三方UI组件
插件：轻松对接即时通讯、推送、支付等各类插件
后端：轻松调用后端组件和api，并实现可视化
⑻ Web App 和 Native App，哪个是趋势
webapp是趋势，因为webapp的“性工能”障碍已经解决，现在nativescript,reactnative,native.js都给js提供了API，让你可以用JS调用HTML5的增强功能及手机OS的API，说白了，现在的JS已走出浏览器，做以前只有原生可以做的事了，原生的优势已荡然无存，而webapp的优势突显出来，什么跨平台啊，跨设备，跨尺寸，即时更新，流量入口等等，这些全是webapp的优势。附带说一下Javascript，这门早期的蹩脚语言，未来有一统江湖的趋势，以前js只局限在浏览器内使用，node.js把js带到了服务器端开发，nw.js把js带到了桌面端开发，espruino,tessel把js带到了嵌入式和物联网开发，reactnative把js带到了移动端开发，而web前端更是有jquery,bootstrap等一大堆优秀js框架供使用………………总之，js热火朝天，有可以进行全栈开发的趋势，有一统江湖的趋势。然而，此时天上却出现一朵乌云：webassembly，大佬门总是不希望世界安稳，因为你们安稳了他们就无利可图，所以总是不停的制定各种分裂、碎片化、不兼容、新产品…………，让大家疲于奔命疲于学习跟进，八大金刚在山顶笑…………
⑼ web UI 和移动UI的区别以及联系
一、用户与界面交互/操作的方式不同
Web网站：以鼠标或触摸板为媒介，多采用左键点击的操作，也支持鼠标滑过、鼠标右键的操作方式。
移动App：直接用手指触控屏幕，除了最通用的点击操作之外，还支持滑动、捏合等各种复杂的手势。
设计要点：
1、相比鼠标，手指触摸范围更大，较难精确控制点击位置，对此iOS人机交互规范中提到手指最合适的触控区域至少需要44 point。所以移动App的点击区域要设置的更大一些，不同点击元素的间隔也不能太近。
2、Web网站支持鼠标滑过的效果，一些tips提示通常采用鼠标滑过展开/收起的交互方式。在移动App则不支持这类效果，通畅需要点击特定的icon来收起/展开提示。
3、移动App支持的丰富的手势操作，比如通过左滑可看到你可能需要的快捷操作“取消关注”、“删除”，这类操作方式的特点是快捷高效，但对于初学者来说有一定的学习、获知成本。我们在合理设计这些快捷操作方式的同时，还需要支持最通用的点击方式来完成任务的操作路径。针对手势操作学习成本高的问题，一些App常通过新手引导的方式来教用户。
4、移动App以单手操作为主，界面上重要元素需要在用户单手点击范围内，或者提供快捷的手势操作。
二、设备尺寸不同
Web网站：不同PC的分辨率不同，浏览器窗口最大化的尺寸也不同；浏览器窗口可缩放。
移动App：设备尺寸相对较小；不同设备的分辨率差异化较多，特别是Android；支持横屏、竖屏调转方向。
设计要点：
1、移动App的尺寸较小，一屏展示的内容有限，更需要明确哪些信息更为重要，有效的“组织”相关联的内容，优先级高的内容突出展示、次要内容适当“隐藏”。
2、Web网站因浏览器分辨率差异较大、且窗口尺寸可变化，设计时需要确定好不同分辨率的内容展示和布局，也因为这一点加上webapp的浏览需求，近几年来响应式设计更为普遍。
3、因设备分辨率、dpi大小不一，所以移动App在界面布局、图片、文字的显示上，要兼顾不同设备的效果，需要设计师与开发共同配合做好适配工作。
4、因移动设备支持横屏、竖屏展示，所以在设计移动App（比如游戏、视频播放界面）时，需要考虑用户是否有“换个方向看看”的需求、哪些情况下切换屏幕方向、如何切换等。
三、使用环境不同
Web网站：通常坐在某个室内、使用时间相对较长；
移动App：既可能是长时间在室内使用、也可能是利用碎片化的时间使用，或站或坐或躺着或行走，姿势不一；
设计要点：
1、使用Web网站时，用户更为专注；
2、使用移动App时，用户很容易被周边环境所影响，对界面上展示的内容可能没那么容易留意到；长时间使用时更适合沉寂式浏览，碎片化时间使用时用户可能没有足够的时间、每次浏览内容有限，类似“稍候阅读”、“收藏”等功能则比较实用；用户在移动过程中更容易误操作，需要考虑如何防止误操作、如何从错误中恢复。
四、网络环境不同
Web网站：网络相对稳定且基本无需担心流量问题
移动App：因用户使用环境复杂，可能在移动过程中从通畅环境到封闭的信号较差的环境，网络可能从有到无、从快到慢；既可使用无需担心流量的WiFi，也可能使用需要控制流量的3G/4G。
设计要点：
1、移动App，网络异常的情况更普遍，需要更加重视这类场景下的错误提示、以及如何从错误中恢复的方法。
2、移动App，在3G/4G情况下用户对流量比较重视，对于需要耗费较多流量的操作，需要提醒用户，在用户允许的前提下才继续进行。
五、通知方式不同
Web网站：对于浏览器的通知中心，用户使用的不多，很难主动唤起用户
移动App：推送通知给用户的方式很常见。
设计要点：
1、在移动App可以用通知及时提醒用户一些重要信息，但也需要考虑用户关闭通知提醒的场景下用户仍然能无碍的使用；因为“通知”功能对用户较为重要，设计师需要思考如何让用户更容易“开启通知权限”。
六、基于位置服务的精细度不同
Web网站：定位功能一般获取到的是当前城市
移动App：可较为精确的获取用户的当前位置
设计要点：
1、移动App可合理的利用用户的位置，给用户提供一些服务。比如，地图类可以搜索“我的位置”到目的地的路线，生活服务类可以查询我的位置附近的美食、商场、电影院等等，这样的方式省去了用户手动输入当前位置的复杂、更加智能化。
⑽ webapp 怎么样使页面变小
1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。2、更新体验较差、同时也比较麻烦每一次发布新的版本，都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新，但是也需要有一个恶心的提示）。3、非常酷因为native app可以调用IOS中的UI控件以UI方法，它可以实现WebApp无法实现的一些非常酷的交互效果4、Native app是被Apple认可的Native app可以被Apple认可为一款可信任的独立软件，可以放在Apple Stroe出售，但是Web app却不行。
Web App：1、开发成本较低使用web开发技术就可以轻松的完成web app的开发2、升级较简单升级不需要通知用户，在服务端更新文件即可，用户完全没有感觉3、维护比较轻松和一般的web一样，维护比较简单，它其实就是一个站点Webapp说白了就是一个针对Iphone、Android优化后的web站点，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术JAVA、PHP、ASP。当然，因为这些高端智能手机（Iphone、Android）的内置浏览器都是基于webkit内核的，所以在开发WEBAPP时，多数都是使用 HTML5和CSS3技术做UI布局。当使用HTML5和CSS3l做UI时，若还是遵循着一般web开发中使用HTML4和CSS2那样的开发方式的 话，这也就失去了WEBAPP的本质意义了，且有些效果也无法实现的，所以在此又回到了我们的主题–webapp的布局方式和技术。
在此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发 Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，你需要对HTML5和CSS3有一定的了解。如果你已经对此有 所了解，那现在就开始往下阅读吧……1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用1 <meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” />2 <meta content=”yes” name=”apple-mobile-web-app-capable” />3 <meta content=”black” name=”apple-mobile-web-app-status-bar-style” />4 <meta content=”telephone=no” name=”format-detection” />第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码2、HTML5标签的使用在开始编写webapp时，哥建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序 的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域 可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。3、放弃CSS float属性在项目开发过程中可以会遇到内容排列排列显示的布局(见下图)，假如你遇见这样的视觉稿，哥建议你放弃float，可以直接使用display:block;4、利用CSS3边框背景属性这个按钮有圆角效果，有内发光效果还有高光效果，这样的按钮使用CSS3写是无法写出来的，当然圆角可以使用CSS3来写，但高光和内发光却无法使用 CSS3编写，这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。-webkit-border-image就个很复杂 的样式属性。5、块级化a标签请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。6、自适应布局模式在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式（支付宝 采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、 chrome都能够正常的显示，你无需再次考虑设备的分辨率。7、学会使用webkit-box上一节，我们说过自适应布局模式，有些同学可能会问：如何在移动设备上做到完全自适应呢？很感谢webkit为display属性提供了一个webkit-box的值，它可以帮助前端工程师做到盒子模型灵活控制。8、如何去除Android平台中对邮箱地址的识别看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页面中电话号码的自动识别。在iOS中是不自动识别邮件地 址的，但在Android平台，它会自动检测邮件地址，当用户touch到这个邮件地址时，Android会弹出一个框提示用户发送邮件，如果你不想 Android自动识别页面中的邮件地址，你不妨加上这样一句meta标签在head中 1 <meta content=”email=no” name=”format-detection” />9、如何去除iOS和Android中的输入URL的控件条你的老板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果1 setTimeout(scrollTo,0,0,0);请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。10、如何禁止用户旋转设备我曾经也想禁止用户旋转设备，也想实现像某些客户端那样：只能在肖像模式或景观模式下才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！至少Apple webapp API已经说到了：我们为了让用户在safari中正常的浏览网页，我们必须保证用户的设备处于任何一个方位 时，safari都能够正常的显示网页内容（也就是自适应），所以我们禁止开发者阻止浏览器的orientationchange事件，看来苹果公司的出 发点是正确的，苹果确实不是一般的苹果。iOS已经禁止开发者阻止orientationchange事件，那Android呢？对不起，我没有找到任何资料说Android禁止开发者阻止浏览器orientationchange事件，但是在Android平台，确实也是阻止不了的。11、如何检测用户是通过主屏启动你的webapp看过Apple webapp API的同学都知道iOS为safari提供了一个将当前页面添加主屏的功能，按下 iphoneipodipod touch底部工具中的小加号，或者ipad顶部左侧的小加号，就可以将当前的页面添加到设备的主屏，在设备的主屏会自动 增加一个当前页面的启动图标，点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别 是它清除了浏览器上方和下方的工具条，这样你的webapp就更加像是nativeapp了，还有一个区别是window对像中的navigator子对 象的一个standalone属性。iOS中浏览器直接访问站点时，navigator.standalone为false,从主屏启动webapp 时，navigator.standalone为true， 我们可以通过navigator.standalone这个属性获知用户当前是否是从主屏访 问我们的webapp的。在Android中从来没有添加到主屏这回事！12、如何关闭iOS中键盘自动大写我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为 input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。13、iOS中如何彻底禁止用户在新窗口打开页面有时我们可能需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self“来指定用户在新窗口打开，或者target属性保持空，但 是你会发现iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面，这样的话，开发者指定的 target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技 巧仅适用iOS对于Android平台则无效。14、iOS中如何禁止用户保存图片＼复制图片我们在第13条技巧中提到元素的-webkit-touch-callout属性，同样为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮，这样用户就无法保存＼复制你的图片了。15、iOS中如何禁止用户选中文字我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字。16、iOS中如何获取滚动条的值桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的，但在iOS中你会发现这两 个属性是未定义的，为什么呢？因为在iOS中没有滚动条的概念，在Android中通过这两个属性可以正常获取到滚动条的值，那么在iOS中我们该如何获 取滚动条的值呢？通过window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。17、如何解决盒子边框溢出当你指定了一个块级元素时，并且为其定义了边框，设置了其宽度为100％。在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元 素以实现全屏自适应的样式，但此时你会发现，该元素的边框(左右)各1个像素会溢了文档，导致出现横向滚动条，为解决这一问题，我们可以为其添加一个特殊 的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。18、如何解决Android 2.0以下平台中圆角的问题如果大家够细心的话，在做wap站点开发时，大家应该会发现android 2.0以下的平台中问题特别的多，比如说边框圆角这个问题吧。在对一个元素定义圆角时，为完全兼容android 2.0以下的平台，我们必须要按照以下技巧来定义边框圆角：1＼-webkit这个前缀必须要加上（在iOS中，你可以不加，但android中一定要加）；2＼如果对针对边框做样式定义，比如border:1px solid #000;那么-webkit-border-radius这属性必须要出现在border属性后。3＼假如我们有这样的视觉元素，左上角和右上角是圆角时，我们必须要先定义全局的(4个角的圆角值)-webkit-border- radius:5px;然后再依次的覆盖左下角和右下角，-webkit-border-bottom-left-radius:0;-webkit- border-bottom-right-border:0;否则在android 2.0以下的平台中将全部显示直角，还有记住！-webkit这个前 缀一定要加上！19、如何解决android平台中页面无法自适应虽然你的html和css都是完全自适应的，但有一天如果你发现你的页面在android中显示的并不是自适应的时候，首先请你确认你的head标签中是否包含以下meta标签：1 <meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;” />如果有的话，那请你再仔细的看清楚有没有这个属性的值width=device-width，如果没有请立即加上吧！20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式新的iOS系统也就是4.3版本，升级后对safari造成了一个bug：即使你添加了如下的meta标签，safari仍然会对页面中的5位连续的数字进行自动识别，并且将其重新渲染样式，也就是说你的css对该标签是无效的。1 <meta name=”format-detection” content=”telphone=no” />我们可以用一个比较龌龊的办法来解决。比如说支付宝wap站点中显示金额的标签，我们都做了如下改写：1 <button class=”t-balance”style=”background:none;padding:0;border:0;”>95009.00</button>元