Mobile development - 随笔分类 - Joanna Qian

手机互动网页项目总结(转)

摘要：目录：一、项目地址二、布局1、按屏滚动会碰到什么问题？2、flexbox会碰到什么问题？3、fixed定位需要慎用。三、动画1、CSS动画与Canvas动画性能优劣分析2、当缩放动画碰上硬件加速3、动画由Javascript来维护还是css维护的思考四、特性1、如何解决音频播放预加载与延时的问题2、... 阅读全文

posted @ 2015-04-28 11:27 Joanna Qian 阅读(689) 评论(0) 推荐(0)

使用jQuery Mobile的注意事项（译）

摘要：翻译编辑自：http://www.appnovation.com/blog/7-things-know-about-jquery-mobile-working-it一、Android和IOS的内置键盘（Native keyboard）是不一样的对手机的内置键盘的操作是比较复杂和富有争议的，不同的手机... 阅读全文

posted @ 2015-02-24 00:43 Joanna Qian 阅读(828) 评论(0) 推荐(0)

【必备】史上最全的浏览器 CSS & JS Hack 手册(转)

摘要：浏览器渲染页面的方式各不相同，甚至同一浏览器的不同版本（“杰出代表”是 IE）也有差异。因此，浏览器兼容成为前端开发人员的必备技能。如果有一份浏览器 Hack 手册，那查询起来就方便多了。这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScr... 阅读全文

posted @ 2015-02-11 12:17 Joanna Qian 阅读(728) 评论(0) 推荐(0)

iScroll4.2.5中的无法滑动或点击的解决方案（转）

摘要：又见iScroll问题，特别是三星手机和iPhone，顺便提一句，现在的项目中他们给div加了height属性来解决不能滚动问题，个人认为是个非常愚蠢的解决方案，我必须使用media query来解决随之而来的不同手机有不同高度问题，既不能适应所有手机，万一将来有了新手机型号，也会发生问题。不过他们... 阅读全文

posted @ 2015-02-11 11:57 Joanna Qian 阅读(4147) 评论(0) 推荐(0)

Remote Debugging Chrome 结合Genymotion模拟器的移动端web真机调试（转）

摘要：尝试了好多方法，刚开始想用bluestacks调试手机页面，不过在打开chrome的时候，会黑屏，什么也看不了。最后又是更新android系统，又是卸掉bluestacks重新安装，怎么都不行。最后没办法弃用bluestacks，改用Genymotion。这样就可以在pc上模拟真机环境调试移动端样式... 阅读全文

posted @ 2014-09-23 00:31 Joanna Qian 阅读(1489) 评论(0) 推荐(0)

为 Node.js 开发者准备的 8 本免费在线电子书(转)

摘要：ode.js 是一套用来编写高性能网络服务器的JavaScript工具包，一系列的变化由此开始。比较独特的是，Node.js会假设你是在POSIX环境下运行它 Linux 或 Mac OS X。如果你是在Windows下，那就需要安装MinGW以获得一个仿POSIX的环境。在Node中，Http是首... 阅读全文

posted @ 2014-05-20 22:11 Joanna Qian 阅读(362) 评论(0) 推荐(0)

用HTML5实现手机摇一摇的功能(转)

摘要：在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation，它将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。这个特性包括两种事件：1、deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据，例如手... 阅读全文

posted @ 2014-04-25 02:35 Joanna Qian 阅读(490) 评论(0) 推荐(1)

Metro UI（Win 8风格）页面设计小记

摘要：一、Metro风格菜单——简单HTML Tile 1 Tile 2 Tile 3 Tile 4 Tile 5 ... 阅读全文

posted @ 2014-03-05 04:55 Joanna Qian 阅读(1411) 评论(0) 推荐(1)

复杂产品的响应式设计【流程篇】 (转)

摘要：都说2013年将是响应式设计爆发的一年。一淘设计团队在去年一淘首页改版时初步尝试了响应式，最近在一淘“玩客”项目中有了更加深入地应用，第一次在复杂产品中实现了全站响应式。中间积累了一些经验也踩了不少坑，于是就有了这个响应式设计三部曲，此系列文章包含理念篇、知识篇和流程篇。响应式网页不像传统网页只需考虑一种状态，不是交付一套设计稿就完事儿了，它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品全面响应式的项目里，交互每个阶段该产出什么？交互与视觉如何协作？前端何时介入？哪些事情让后端开发来做更合理？经历“玩客”第一版后，我们得到了一些答案。响应式设计之所以叫响应式“设计”而不叫阅读全文

posted @ 2014-02-27 01:40 Joanna Qian 阅读(485) 评论(0) 推荐(0)

超棒的响应式设计测试书签和工具（bookmarks）(转)

摘要：一、测试书签（bookmarks）Viewport Resizer这个书签号称拥有158个国家3万多活跃的用户，主要特性：完全自定制方便的添加自定义尺寸手动的横竖屏切换自动的横竖屏切换(portrait | landscape)支持Media query自适应Meta的viewport设置手动重新加载页面移除页面工具栏Viewport相关信息显示 (尺寸，分辨率，横纵屏，user agent)支持触摸设备支持vectorResizer这个在线书签允许你快速的修改页面的尺寸来测试响应式的设计. 并且支持Chrome的扩展！Bricss另外一个方便的测试响应式的书签，你可以自己指定自己的几套显示窗阅读全文

posted @ 2014-01-23 05:38 Joanna Qian 阅读(819) 评论(0) 推荐(0)

10个必备的移动UI设计资源站（转）

摘要：创建移动设计模式是非常重要的一步，记住！这是为移动设备设计而不是web。不仅仅是移动屏幕远小于普通的电脑屏幕，关键是鼠标和键盘已经被手指替代了！当然还有更重要的，说起来很苦逼，我们再也不能使用一种模式来通吃这些不同的移动平台了，这可比兼容IE那一家子要苦难得多，毕竟还没有很好的规范。不是吓唬你，别以为只有那巴掌地大小，为移动端做设计并不是很容易。值得庆幸的是，国外已经有很多优秀的移动用户界面资源是可用的，这些先驱的宝贵资源可以大大帮助你的移动设计或开发你的响应式网站。相信今天要隆重推荐的10个网站，无论是在你设计一个新的移动应用程序还是寻找特定的设计解决方案时，他们都会踏踏实实的帮助到你。阅读全文

posted @ 2013-12-31 05:48 Joanna Qian 阅读(347) 评论(0) 推荐(0)

iscroll4框架解析[webapp开发]（转）

摘要：概要iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器（诸如iPhone，iPad，Android这些系统上广泛使用）提供了一种本地化的方式来对一个限定了高度和宽度的元素的内容进行滑动。很不幸的是，这种情况下所有的web应用的页面就不能够包含具有position:absolute的头、页尾或者是一个内容可滚动的中间区域。然而，Android系统最新修订版已经可以支持这种功能了（尽管支持的力度还不是特别好），Apple公司似乎不太情愿将one-finger滑动事件运用到div元素上。除了以前版本的iScroll的特性以外，iS 阅读全文

posted @ 2013-12-17 04:10 Joanna Qian 阅读(326) 评论(0) 推荐(0)

IE9中Media queries在iframe无效的解决方法

摘要：在css中有5个media querie@media screen and(min-width:0px)and(max-width:319px){ body {background-color:red;}}@media screen and(min-width:320px)and(max-width:480px){ body {background-color:orange;}}@media screen and(min-width:481px)and(max-width:980px){ body {background-color:yellow;}}@media scree... 阅读全文

posted @ 2013-12-17 03:58 Joanna Qian 阅读(1247) 评论(0) 推荐(0)

针对多点触控浏览器进行的开发(转)

摘要：触摸事件三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：1.touchstart：手指放在一个DOM元素上。2.touchmove：手指拖曳一个DOM元素。3.touchend：手指从一个DOM元素上移开。每个触摸事件都包括了三个触摸列表：1.touches：当前位于屏幕上的所有手指的一个列表。2.targetTouches：位于当前DOM元素上的手指的一个列表。3.changedTouches：涉及当前事件的手指的一个列表。例如，在一个touchend事件中，这就会是移开的手指。这些列表由包含了触摸信息的对象组成：1.identifier：一个数值，唯一标识触摸会话（touch se 阅读全文

posted @ 2013-10-09 03:01 Joanna Qian 阅读(813) 评论(0) 推荐(0)

10个最佳的触控手式的JavaScript框架（转）

摘要：由于各种原因移动开发是一项艰难的工作,比如它是非常耗时的、充满压力的任务。最重要的是,作为一个开发人员,你必须保持更新所有最新的技术和技巧——你必须知道所有最新的趋势,问题和解决方案等。例如跨浏览器支持和兼容性、屏幕分辨率等等曾经是巨大的问题，但尽管已经解决，开发者仍然面临着这些被要求学习最新的技术来保持更新。移动开发是一个快速增长的行业，移动网站正在以惊人的速度布局。特别是现在令人惊讶的是触屏智能手机和平板电脑的井喷。因此拥有一个移动版的你的网站是一个必须跟上不断发展的科技世界。因此必须推出适应这些设备的应用程序来改善他们的业务。所有的这一切都可能是由于JavaScript 使得触摸设备阅读全文

posted @ 2013-09-05 09:04 Joanna Qian 阅读(878) 评论(0) 推荐(0)

PhoneGap开发不可或缺的五件装备

摘要：PhoneGap是一种介于WebApp和NativeApp之间的解决方案，它为每种移动客户端提供一个Native的壳，这种壳里边包着一个Web应用。借助于壳，Web应用可以被安装，可以被发布到各大市场。同样的，借助于壳和设备之间的通信，壳内的Web应用可以轻松调用设备硬件。虽然目前想用 PhoneGap开发商业应用还有很多的坑要填，但其跨平台和低学习成本的特性决定了未来它在移动互联网领域必有一席之地。1 轻量级的JQUERY兼容库JQuery已经成长的得非常强大了，但在移动设备上有些臃肿。如果你的应用只运行在WebKit内核的机器上，那么我强烈建议你换用移动版本的JQuery兼容库。Zept 阅读全文

posted @ 2013-09-05 07:53 Joanna Qian 阅读(390) 评论(0) 推荐(0)

优化移动网站的9大窍门(转)

摘要：关于移动用户在介绍窍门之前，你要记住一个事实---那就是浏览你移动网站的人。这句话看上去很傻，但确实有很多人忘了这个简单的事实。移动用户希望感受与传统网站完全不同的体验。例如，移动用户通常寻找这些重要信息：到达你办公室的路线，你商店位置的地图以及点击通话的电话号码。他们并不想查看你冗长的员工介绍、企业文化或者企业新闻PDF等。记住这点，再来看看以下帮你打造移动优化网站的九大窍门：1、简化、简化、再简化第一步：决定放置哪些内容。由于屏幕空间有限，重要的是归纳总结你的用户最可能寻找的信息。一个店铺位置导航？也许吧。一个“联系我们“的表格要填13项内容？太多了。从消费者进入网站到购买尽可能提供简单的阅读全文

posted @ 2013-08-30 11:52 Joanna Qian 阅读(370) 评论(0) 推荐(0)

backbone.js初探(转)

摘要：BackBone是JavaScript frameworks for creating MVC-like web applications，最近流行的用来建立单页面web application的工具，遵循并使用了Restful JSON框架。Backbone通过提供模型Models、集合Collection、视图View赋予了Web应用程序分层结构。通过以下方式实现分层结构：模型Model绑定键值数据和自定义事件，表示应用中所有数据，models中的数据可以创建、校验、销毁和保存到服务端，当models中值被改变时自动触发一个"change"事件、所有用于展示models 阅读全文

posted @ 2013-08-11 13:43 Joanna Qian 阅读(557) 评论(0) 推荐(0)

Sencha Touch快速入门（译）

摘要：翻译自：http://www.sencha.com/learn/sencha-touch-quick-start/1、下载Sencha Touch SDK——下载链接2、安装Safari或Chrome——IE不适合测试Sencha touch application，Sencha只在WebKit-based的浏览器或设备上运行。3、安装测试服务器——虽然Sencha可以在客户端直接运行，但服务器端的功能更加齐全。IIS或XAMPP等软件均可使用4、解压Sencha Touch SDK解压或拷贝Sencha到C:\xampp\htdocs目录下，并重命名为touch现在可以进行测试了：http: 阅读全文

posted @ 2013-06-27 23:49 Joanna Qian 阅读(447) 评论(0) 推荐(0)

图片的响应式实现

摘要：一、背景图片响应式实现1、为了适配 Retina屏幕，传统的 CSS3 实现方式是通过加载一张宽高分别放大两倍的图片，然后通过Media Queries使背景图片尺寸减小一倍「background-size:50% 50%;」，例如：.mod .hd h3 {background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */}/* ------------- Retina ------------- */@media only screen and (-o-min-d 阅读全文

posted @ 2013-06-27 02:39 Joanna Qian 阅读(741) 评论(0) 推荐(0)

随笔分类 - Mobile development