随笔分类 - 手机开发
摘要：1、页面切换动画结束时卡（禁用动画）2、搜索或导航标签需要固定（标签选择器动态修改高度）3、pancel容器默认生成的时候内容不放 通过动态的的$("").empty().html()添加内容的时候 滚动条有问题 ，没有生成 滚动容器afScrollBar那层（标签默认放个占位）4、快速切换详情页和...
阅读全文
摘要：1.下载nodejs。。。然后注销让nodejs可用2.下载jdk，ant。和安卓的sdk。jdk是为ant编译时需要,设置JAVA_HOME环境变量C:\Program Files\Java\jdk1.8.0_05降ant和sdk的路径添加到path中。。C:\Program Files (x86...
阅读全文
摘要：一些重要的名词解释：CSS pixels（CSS 像素）：详见http://www.w3.org/TR/css3-values/#reference-pixeCSS声明的像素值，可随着放大缩小而放大缩小。Device pixels（设备 像素）：Layout viewport（布局视口）设计像素值固定，对web开发者来说基本没有用。HTML元素初始视口区域，css中声明宽度的20%等都是按照这个视口来计算。Visual viewport（设备视口）屏幕视口，通过这个视口能看到页面布局。关于移动设备：有两个视口，Visual Viewport和Layout Viewport。Visual Vie
阅读全文
摘要：概念：设备像素和CSS像素首先要明白CSS像素和设备像素之间的区别。设备像素是定义了我们使用的设备的分辨率，一般来说可以通过screen.width/height来得到。如果我们在浏览器里面创建一个width:128px的元素，而我们的屏幕是1024px宽，那么在浏览器最大化的时候，浏览器的宽度应该是这个元素的八倍（大概八倍，暂时忽略那些tricky的bits）。如果用户使用滚轮放大或者缩小页面(Zooming)，那么这个关系就会变化。一般来说，现在的浏览器对Zomming的实现都是通过伸缩像素，也就是当用户Zoom到200%的时候，你的128px宽的元素宽度并不会变成256px，而是每个像素
阅读全文
摘要：Viewport：字面意思为视图窗口，在移动web开发中使用。表示将设备浏览器宽度虚拟成一个特定的值（或计算得出），这样利于移动web站点跨设备显示效果基本一致。基本写法：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,target-densitydpi=medium-dpi">测试获取viewport的width：document.documentElement.clientWidth1、
阅读全文
摘要：当用户设置"width=device-width"时,网页宽度等于设备宽度.设备宽度会根据缩放比率计算,比如小米1280*720,则网页宽度为720px/设备缩放比率.meta name="viewport" content="width=device-width"缩放比例window.devicePixelRatio:不同的手机会根据手机密度,缩放页面.获得缩放比例使用window.devicePixelRatio.小米手机的缩放比例为2.就是1px,会被放大为2px;所以如果想在小米显示全屏的话则使用.720px/2为实际手机上显
阅读全文
摘要：名词解释Px（Pixel像素）不同设备显示效果相同。这里的“相同”是指像素数不会变，比如指定UI长度是100px，那不管分辨率是多少UI长度都是100px。也正是因为如此才造成了UI在小分辨率设备上被放大而失真，在大分辨率上被缩小。Screen Size（屏幕尺寸）一般所说的手机屏幕大小如1.6英寸、1.9英寸、2.2英寸，都是指的对角线的长度，而不是手机面积。我们可以根据勾股定理获取手机的宽和长，当然还有面积。Resolution（分辨率）指手机屏幕垂直和水平方向上的像素个数。比如分辨率是480*320，则指设备垂直方向有480个像素点，水平方向有320个像素点。Dpi（dots per i
阅读全文
摘要：本文所说devicePixelRatio其实指的是window.devicePixelRatio, 被所有WebKit浏览器以及Opera所支持，随着显示器的发展，这个属性也慢慢登上了前端技术的舞台。本文内容大部分属于翻译性质内容，因此，会不那么通俗易懂。不过，你是做手机开发的，或是有意向的，本文的内容如果细细读来，还是有些收获的。一、定义定义如下：window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dipsdip或
阅读全文
摘要：移动设备的用户越来越多，每天android手机的激活量都已经超过130万台，所以我们面向移动终端的WebAPP也开始跟进了。本文主要介绍webapp的开发与调试的相关知识和经验，以及给出几种可选的解决方案。一、基本概念（1） CSS pixels与device pixelsCSS pixels： 浏览器使用的抽象单位， 主要用来在网页上绘制内容。device pixels： 显示屏幕的的最小物理单位，每个dp包含自己的颜色、亮度。等值的 CSS pixels在手机屏幕上占多大的位置，这不是固定的，这取决于很多属性。经过分析和总结，我们可以得出这么一条公式： 1 CSS pixels = （de
阅读全文
摘要：去年曾对Phonegap做过一次调研，当时还是1.1版本，印象也一般。对他的性能以及真实的跨平台能力都不太确定。今年过完春节至今正好有机会参与了一个纯Phonegap + HTML5开发的项目，项目至今已经完成了一期的App Store提交，所以也正好能抽时间来小结一下。一个月左右的开发过程让我对这种开发模式有了更深的认识，这对于前端开发人员而言绝对是一个大的机会。Phonegap Native API + Plugin基本能访问移动设备绝大部分本地功能，除此之外就是HTML5了，迁移成本非常的低，而开发效率也是很高的。 与传统Web开发相比，在移动设备进行Web开发有着自己的特点，例如不同设
阅读全文
摘要：在这里我也顺便介绍一下Phonegap（这个是我自己对Phonegap的理解，因为没有深入研究，如有错误请之指出），因为这玩意是我们做网站APP用的关键东西，因为你不可能每次写好一个样式，然后弄到手机上去看啊，那太麻烦了，所以Phonegap就为我们提供了一个模拟平台，它可以帮你在PC机上模拟出安卓系统，当然，首先你要安装一个Android SDK，你可以下载：installer_r21-windows.exe，建议下载这个，因为官网下载Android SDK我不会用,,,,installer_r21-windows.exe这个里面有一个下载工具可以下载到不同版本的SDK我在这个里面安装的4.
阅读全文
摘要：做为一个 csser ，对页面调试的要求其实并不高，一般来说，只要对照视觉设计原稿，肉眼“调试”就成了。不过在页面完成交由后续开发的过程中（比如后端动态输出、引入 js 等），对一些一时不能确定问题所在时， csser 还是需要协助检查一下 dom 结构是不是按照设计之初正常工作的。回想刚开始进入 webapp 领域，遇到一个了页面动画切换问题，无法判断 js 执行后是否生成了正确的 dom 结构。使用 css 背景色调试法简单得到了答案。作为确认，需要检查当前的 dom 结构，苦于手中无可用的调试工具，便请 jser 现场写了一段代码，将页面 html 代码输出到页面中进行排查。当然，在桌面
阅读全文
摘要：现在、将来，用移动设备上网越来越成为主流。但对于开发者们来说，移动web的调试一直是个难题，前期可以使用模拟器来协助调试，但到了真机调试阶段就让人非常头痛。而Weinre就是解决这难题的利器。 Weinre的本意是Web Inspector Remote，它是一种远程调试工具。功能与Firebug、Webkit inspector类似，可以帮助我们即时更改页面元素、样式，调试JS等，下面就简单介绍下如何使用。下面以以Windows系统为例： 一、首先确保你的电脑已经搭建好了java环境。即：安装了jdk。这里就不多说了，在网上搜个jdk，一步步安装及ok。 二、安装及运行Weinre ...
阅读全文
摘要：做移动互联网开发呢，比较头疼的可能就是调试问题了，我是这么感觉的。因此，我对市面上比较流行的远程调试方法做了总结，对比了 Firefox、Chrome、Opera 三大浏览器的远程调试工具，大家各取所需，希望能对大家的日常工作有多帮助。一、Opera 远程调试准备工作：下载桌面版 Opera下载欧朋 HD 最新版下载欧朋 HD 模拟器方式一、 通过欧朋 HD 模拟器和 Opera Dragonfly 进行远程调试安装下载欧朋 HD 模拟器、桌面版 Opera、欧朋 HD。打开 Opera，“Ctrl + Shift + i” 打开调试工具 Dragonfly。点击右上 “远程调试设置”，默认端
阅读全文
摘要：网页打开方式：<a href="#" target="_blank">链接</a>target的值：_self(相同窗口，浏览器默认)、_top(整页窗口)和_parent(父窗口)相同、_blank(在新建的窗口打开)<head><base target="_blank" ></head>表示页面中的所有链接都在新窗口打开<a href="" rel="external">madinc.co</a>//auto
阅读全文
