Mobile development - 随笔分类(第2页) - Joanna Qian

iScroll框架的使用和修改

摘要：iScroll 的诞生是因为手机 Webkit 浏览器（iPhone、iPod、Android 和 Pre）本身没有为固定宽度和高度的元素提供滚动内容的方法。这导致了很多网页使用 position:absolute 无法固定页头页尾，并对内容进行滚动的方式。而 iScroll 就是为了解决这个问题。... 阅读全文

posted @ 2013-06-26 00:36 Joanna Qian 阅读(10604) 评论(3) 推荐(3)

判断站点访问的终端类型（移动端还是pc端）的方法（转）

摘要：要了解某个网站是在移动设备上打开的还是在pc web浏览器中打开的，我们可以有以下综合的几种方式来搞定：通过判断Request.UserAgent中的具体信息来分析判断，因为UserAgent包含了很多的信息，所以我们可以根据其中的某些信息来进行判断，具体的判断方式如下：（1）string strUserAgent = Request.UserAgent.ToString().ToLower(); if (strUserAgent != null){ if (Request.Browser.IsMobileDevice == true || strUserAgent.Contains(&quo 阅读全文

posted @ 2013-06-25 04:20 Joanna Qian 阅读(818) 评论(0) 推荐(0)

45个关于移动网络设计与开发的实用指南交互设计（转）

摘要：好东西，感谢淘宝feeling的整理，很有用iOS（iPhone和iPad）实用指南·Safari Web内容指南（PDF格式）·准备为您的网页适配iPad·iPhone上的Safari图形，媒体及视觉效果如何编码的·Safari的HTML参考（PDF格式）·Safari的CSS参考（PDF格式）·Safari的CSS3的视觉效果指南（PDF格式）·Safari浏览器客户端存储和离线应用程序编程指南（PDF格式）·苹果计划参考网址Android浏览器实用指南·从Android屏幕定位WEB应用服务阅读全文

posted @ 2013-06-24 03:36 Joanna Qian 阅读(331) 评论(0) 推荐(0)

iScroll框架解析——Android 设备页面内 div（容器，非页面）overflow:scroll; 失效解决（转）

摘要：移动平台的活，兼容问题超多，今儿又遇到一个。客户要求在弹出层容器内显示内容，但内容条数过多，容器显示滚动条。按说是So easy，容器设死宽、高，CSS加属性overflow:scroll;-webkit-overflow-scrolling:touch;完事！可拿设备去测的时候有趣了，Pc allbrowser正常，ios正常，android失效。泥马在android下效果与 overflow:hidden;一样，溢出部分隐藏了！水平有限，用尽吃奶力各种解决未果，网上一顿乱搜，Google搜索有人说是android系统BUG，最后查到比较靠谱的解决是国外某高手开发了个JS库，名曰iScro 阅读全文

posted @ 2013-06-24 03:34 Joanna Qian 阅读(11745) 评论(0) 推荐(0)

基于物理尺寸的响应式设计(转)

摘要：两种Queries之间的细微区别比较如下两个media-query声明：@media (min-resolution:341dpi) and (min-width:767px) > { }与@media (max-resolution:131dpi) and (min-width:767px) > { }乍一看，是不是没啥子区别？当然不是了。第一段声明是针对HTC Windows Phone 8X，而第二段针对iPad2。通过使用resolution query，可以将大小不同的设备区分开来。目前看来，@media (min-width: 767px){ }对HTC和iPad而言没阅读全文

posted @ 2013-06-18 00:56 Joanna Qian 阅读(571) 评论(0) 推荐(0)

利用HTML5的一个重要特性—DeviceOrientation来实现手机网站上的摇一摇功能(转)

摘要：转自：<script>// DeviceOrientation将底层的方向传感器和运动传感器进行了高级封装，提供了DOM事件的支持。// 这个特性包括两个事件：// 1、deviceOrientation：封装了方向传感器数据的事件，可以获取手机静止状态下的方向数据（手机所处的角度、方位和朝向等）。// 2、deviceMotion：封装了运动传感器的事件，可以获取手机运动状态下的运动加速度等数据。// 使用这两个事件，可以很能够实现重力感应、指南针等有趣的功能。// 现在在很多Native应用中有一个非常常见而时尚的功能 —— 摇一摇，摇一摇找人、摇一摇看新闻、摇一摇找金币。。。阅读全文

posted @ 2013-05-07 10:14 Joanna Qian 阅读(356) 评论(0) 推荐(0)

响应式Web设计的优化（转）

摘要：1、轻量级的Javascript库：针对PC端网页当然会首选jQuery来作为前端javascript库，但是针对移动端来说，jQuery太重，而现在针对移动端来说，有很多优秀的框架可供使用，jQuery Mobile、YUI、XUI等是不错的框架，但是个人比较倾向于zepto。不过zepto预定义的一些事件，比如触屏滑动的swipe事件，在ios 上完美支持，但是在android上，有些浏览器确实不支持的，这时候就需要寻求与一些第三方的javascript插件库，好在现在网上有很多优秀的第三方javascript插件库可供使用，所以各位按需索取吧。2、减少HTTP请求次数：一个页面的阅读全文

posted @ 2013-05-07 10:10 Joanna Qian 阅读(343) 评论(0) 推荐(0)

PhoneGap插件入门（转）

摘要：PhoneGap插件概述PhoneGap有两部分组成1.PhoneGap javascript API，即对在浏览器(支持各种浏览器)上运行的javascript公开的一些原始功能的API2.PhoneGap javascript API中，针对不同平台的本地代码这些对我们做成通用是非常有利的1.通过PhoneGap javascript API访问物理位置2.通过PhoneGap javascript API访问联系人3.拨打电话4.等等或多或少，我们已经对javascript开放了大部分手机功能PhoneGap插件局限(Heavy Weight Lifting、后台处理、复杂的业务逻辑) 阅读全文

posted @ 2013-03-20 05:01 Joanna Qian 阅读(382) 评论(0) 推荐(0)

PhoneGap介绍

摘要：PhoneGap是一个基于HTML和JavaScript的应用开发平台，使用它可以构建本地应用。你可以把PhoneGap看作一个正方形的web view container，它使用JavaScript编程接口实现用户在不同操作系统下的访问。你可以利用传统的web开发技术(如HTML、CSS、JavaScript)开发用户接口，利用PhoneGap容器把它们部署到不同的应用环境和设备上。PhoneGap可以被用来开发跨平台的应用，这些平台包括AppleiOS、GoogleAndroid,、Windows Phone、BlackBerry、HP webOS,、Symbian和bada。你可以通过链阅读全文

posted @ 2013-03-20 04:55 Joanna Qian 阅读(731) 评论(0) 推荐(0)

PhoneGap android环境设置

摘要：一. 安装SDK + Cordova下载安装Eclipse Classic下载安装Android SDK下载安装ADT Plugin下载Cordova，并解压到任意目录二、搭建环境配置环境变量三、Eclipse建立工程1、新建普通android工程，New > Android Project在根目录下新建/libsassets/www拷贝PhoneGap中的资料拷贝cordova-2.5.0.js到assets/www拷贝cordova-2.5.0.jar到/libs拷贝xml文件夹到/res拷贝android文件夹到/libs建立build Path，鼠标右键单击/libs文件夹，并选阅读全文

posted @ 2013-03-20 01:02 Joanna Qian 阅读(365) 评论(0) 推荐(0)

Retina（视网膜）的Web页面开发

摘要：一、retina视网膜时代的页面随着iphone4与new ipad的推出，retina(视网膜)屏在移动设备中被越来越广泛的应用，retina屏给画面带来了前所未有的清晰平滑效果，却给开发人员带来了一些小小麻烦……高分辨率屏幕与高像素密度屏幕在 Retina 视网膜屏幕面世之前人们很少关注像素密度，尤其在 Windows 系统下，提高屏幕分辨率一般都是通过提高屏幕尺寸。而随着屏幕分辨率的提升，图像和文字显示目标会相应缩小，造成观看极其不便。因为系统并不会自动根据屏幕尺寸和分辨率关系相应的调整文字和图标的大小。（即使手动调整也会因为微软一直采用的点阵字体和大多数位图在提高分辨率后，因为多于出的阅读全文

posted @ 2013-03-08 03:02 Joanna Qian 阅读(2058) 评论(1) 推荐(0)

什么是手机和Mobile Web的UA识别

摘要：用户代理识别——wiki中的解释当一个软件代理运行于一个网络协议时，它通常通过向它的 operating peer 提交一个特征识别的字符串以标识它自己，它的应用类型，操作系统，软件供应商，或者软件修订版本。在HTTP, SIP 以及 SMTP/NNTP[2]协议中，这个识别是通过user-agent头字段传送的。网络机器人，例如网络抓取工具，通常也包括一个URL以及/或一个电子邮件地址以便网站管理员可以联系 bot 的操纵者。在 HTTP 中，User-Agent 字符串通常被用於内容协商，而原始服务器为该响应选择适当的内容或操作参数。例如，User-Agent 字符串可能被网络服务器用以基阅读全文

posted @ 2013-02-26 05:14 Joanna Qian 阅读(2289) 评论(0) 推荐(0)

iPad的横板与竖板中表单居中设置解决方案（转）

摘要：http://blog.csdn.net/spring21st/article/details/7457021<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>login form&l 阅读全文

posted @ 2013-02-26 04:36 Joanna Qian 阅读(804) 评论(0) 推荐(0)

移动web开发常用JavaScript代码(转)

摘要：转载：http://mobile.51cto.com/web-321960.htm1.如果网页是在iPhone或Android浏览器中查看，则在主体元素中添加“iPhone”或“Android” 类名Javascript代码if (navigator.userAgent.match(/iPhone/i)) { $('body').addClass('iPhone'); } else if (navigator.userAgent.match(/Android/i)) { $('body').addClass('Android'); 阅读全文

posted @ 2013-02-21 04:22 Joanna Qian 阅读(310) 评论(0) 推荐(0)

3G web开发小结

摘要：（摘自-http://blog.csdn.net/kaosini/article/details/7586295?reload，http://mobile.51cto.com/iphone-276778.htm）进入布局的讨论之前，先来赏析一下已有的iPhone应用：Facebook iPhone EditionFacebook的iPhone版。如果你已经习惯了在iPhone上使用过Facebook，第一次在PC上浏览这个页面会被它的“肥大”吓坏的。从这个页面我们能够得知，让页面自动适应iPhone屏幕的方法就是尽量使用百分比来定义宽度，特别是全页宽度一律用100%，如果是导航栏里面4个项目并阅读全文

posted @ 2013-02-21 01:49 Joanna Qian 阅读(667) 评论(0) 推荐(0)

UC browser对CSS的支持小结——手机网站CSS小结

摘要：近期项目中，白色无下划线的链接在iphone中变成了蓝色有下划线，明显iphone不支持该链接的css，赶紧google、百度一下，发现了不少css样式iphone居然不支持。解决方法：多加一个标签，对a标签定义颜色和下划线，注意a标签不能有背景图片 135727322177 注意加上a标签后并且设置href内容的好处：可以保证兼容各个手机直接点击手机号码直接拨号摘录：UC会判断打开的网站是不是WAP站，从而造成它（UCWEB）认为是WAP站和不是WAP站的解析不同。例如：www.a.com和Wap.a.com两者指向的为同一个服务器的同一个目录，结果会发现两者解析出来的样式不同。... 阅读全文

posted @ 2013-02-21 00:47 Joanna Qian 阅读(2045) 评论(0) 推荐(1)

加速Web开发的9款知名HTML5框架(转)

摘要：与手工编码比起来，HTML5框架在准确性和正确率方面给予了保证。大多数HTML5框架都会有一个组合或者包含一些额外的组件，比如jQuery Scripts。CSS3样式表则以改善多媒体特征的功能性和响应式的Web布局为主。如果你有一个根据固定流程进行的特定项目，为了保证项目刚开始就能有较高的正确率，那么你可以利用HTML5框架来提升整个开发过程，并且让网站拥有一致性结构。伴随着智能手机正在席卷整个移动市场，在移动设备上开发出兼容性高的网站已变的非常重要，相信所有的网站所有者都希望自己的网站能够兼容所有的智能手机平台，HTML5框架可以轻松解决这种跨平台问题。如果你是一名Web设计师，你肯定有兴阅读全文

posted @ 2013-02-13 03:07 Joanna Qian 阅读(355) 评论(0) 推荐(0)

移动平台3G手机网站前端开发布局技巧汇总(转)

摘要：了解一些基础，转载地址：http://www.wufangbo.com/mobile-3g-mobile-development自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序，运行在高端的移动终端设备)。开发者们都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的APP；一种是基于高端机的浏览器运行的WebApp，本文将主要讲解后者。WebApp与NativeApp有何区别呢？NativeApp：1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。2 阅读全文

posted @ 2013-02-10 07:29 Joanna Qian 阅读(312) 评论(0) 推荐(0)

Mobile Web开发基础（转载&摘）

摘要：一、viewport标签宽度——我们做Mobile Web开发的第一个需要趟的河，因为移动设备的碎片片太严重了。以iPhone上的Mobile Safari为例，可能是因为Mobile Safari在请求到刚才的网页后，假设它是一个为桌面浏览器设计的网站（实际上可能大多数移动浏览器都是这样认为的)。因此Mobile Safari假设网页宽度是980像素（不同的浏览器可能默认不同），同时将其缩小以便全部显示。如果我们的网页是专门为移动终端设计的，那么我们就需要告诉移动浏览器不要以默认的宽度来显示。因此，我们需要使用viewport.对以上代码进行修改,如下：<meta name=&quo 阅读全文

posted @ 2012-10-12 08:58 Joanna Qian 阅读(375) 评论(0) 推荐(0)

html5游戏开发1-Aptana 3 eclipse 插件安装

摘要：1) InstallingviaEclipsehttp://download.aptana.com/studio3/plugin/install1Fromthe "Help" menu,select "InstallNewSoftware..." toopentheInstallNewSoftwaredialog.2PastetheURLfortheupdatesiteintotheWorkWithtextbox,andhittheEnter(orReturn)key.3Inthepopulatedtablebelow,checktheboxnextto 阅读全文

posted @ 2012-09-08 05:26 Joanna Qian 阅读(1459) 评论(0) 推荐(0)

随笔分类 - Mobile development