刘老六的狗窝

摘要： 当用户设置"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或 阅读全文

摘要： 数组是JavaScript提供的一个内部对象，它是一个标准的集合，我们可以添加(push)、删除(shift)里面元素，我们还可以通过for循环遍历里面的元素，那么除了数组我们在JavaScript里还可以有别的集合吗?由于JavaScript的语言特性，我们可以向通用对象动态添加和删除属性。所以Object也可以看成是JS的一种特殊的集合。下面比较一下Array和Object的特性:Array:新建:var ary = <nobr><a class="iAs" oncontextmenu="return false;" onmouse 阅读全文

摘要： 移动设备的用户越来越多，每天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 代码输出到页面中进行排查。当然，在桌面 阅读全文

摘要： https://developer.mozilla.org/en-US/docs/Web/API 阅读全文

摘要： 现在、将来，用移动设备上网越来越成为主流。但对于开发者们来说，移动web的调试一直是个难题，前期可以使用模拟器来协助调试，但到了真机调试阶段就让人非常头痛。而Weinre就是解决这难题的利器。 Weinre的本意是Web Inspector Remote，它是一种远程调试工具。功能与Firebug、Webkit inspector类似，可以帮助我们即时更改页面元素、样式，调试JS等，下面就简单介绍下如何使用。下面以以Windows系统为例： 一、首先确保你的电脑已经搭建好了java环境。即：安装了jdk。这里就不多说了，在网上搜个jdk，一步步安装及ok。 二、安装及运行Weinre　... 阅读全文