H5图片上传应用开发中的那些坑……

Author : lovecicy

图片上传是web应用开发中非常常见的功能,在桌面应用开发中,我们有很多插件,比如jQuery File Upload、uploadify,但是在移动端,jQuery太重,而且我们又有许多HTML5的API可以使用,所以,在新的项目里,选择了使用HTML5的file API来实现图片上传的功能。但是,坑也不少啊/(ㄒoㄒ)/~~ 1. 项目介绍 项目中需要上传图片,作为头像或者作为文章的图片。因为没有使用jQuery,也没有使用zepto,而且使用场景只是在移动端,因此选择了不使用插件,使用HTML5的file API。 2. 使用方法 file API的使用方法很简单,可以拆解为以下几步: 在HTML中添加一个input组件,type类型设置为file。 监听input的change事件。 在事件处理函数中,用FileReader api读取图片内容。 监听FileReader对象的onloadend事件,当读取文件完成时,上传图片。 3. 坑们 1. ios下alert弹框会挂 在选择图片后,首先判断图片的类型是否在限定的类型内、图片大小是否超出限定大小,如果超出,则弹出弹框提示用户[Read More]

standard

CSS中的百分比值

Author : lovecicy

一、介绍 CSS中有很多的属性可以有百分比值,而这些百分比值所相对的却各不相同,本文就来总结下这些拥有百分比值的CSS属性的百分比值是相对于谁来计算的。 首先有一个概念需要交待,那就是containing block,这里将其翻译成包围块。许多元素百分比值的相对值是根据包围块来计算的,因此对于包围块的定义,就非常重要了。包围块可以理解为一个包围元素的长方形,而包围块的定义对不同元素来说各不相同。 根元素的包围块叫做初始包围块,和viewport有同样的尺寸。其他元素的包围块取决于元素的定位值: static/relative: 包围块为祖先元素中最近的display值为block/inline-block/list-item/run-in/table/table-cell的元素的内容区域 absolute: 包围块为节点树中最近的定位元素的包括padding的内容区域,定位元素即POSITION属性值为absolute、fixed或relative的元素 fixed: 包围块为viewport,即可视区域 二、来看看都有哪些百分比值 知道了包围块的定义,我们再来看看哪些属性有百分比值:[Read More]

standard

浅谈 cookie, sessionStorage和localStorage

Author : luckyGirl

HTML5刚出来时,把HTML5的特性翻了一遍,日子一久,不用几乎都忘光了, 最近项目中跟后台在讨论数据本地存储的问题,想到了除了cookie还有这个HTML5的新特性 — Web Storage,Web Storage又分为sessionStorage和localStorage。接下来来探探这三种的区别与用法。 一. 三者的优劣势 cookie: 优势:所有浏览器都支持,同源但不同目录下也可共享 劣势:同源的http请求都会携带cookie,即使不需要,增加了流量;个数有限制、存储数据比较小,对于这个限制各浏览器稍有不同,一般是50个,大小在4k以内 Web Storage: 优势:存储大小比起cookie大很多,一般限制是5M-10M;App可以在线或离线情况下使用;没有额外的请求头部数据;API简单易用; 劣势:数据以字符串格式存储,其他类型的对象需要在存储前转义使用时再编译;复杂数据集合存储时间可能很慢;存在浏览器兼容性问题,尤其IE只有IE8+才支持。 但两者还存在着共同的安全性问题,如关键攻击载体的CSRF,XSS,Session Hijacking等,因此一些[Read More]

standard

Mobile Web开发奇淫巧计

Author : luckyGirl

做了一段时间的Mobile Web开发,遇到一些坑,总结一下: HTML <meta> HTML5 开发一个页面适配所有设备,先从配置<meta>各种标签属性开始。 viewport: 对文档的视图进行配置,示例有强制文档宽度为设备宽度;初始化缩放比例是1:1;最大缩放比例是1;不允许用户进行屏幕缩放;其他属性如minimum-scale,height等 apple-mobile-web-app-capable:IOS特有标签,是否允许全屏模式浏览 apple-mobile-web-app-status-bar-style:Safari顶端状态条颜色 format-detetion:格式检测,是否把数字识别为电话号码,是否识别邮箱 http-equiv=”x-dns-prefetch-control”:DNS Prefetch 是一种DNS预解析技术,对网页中的域名进行解析缓存,减少用户等待时间,提高用户体验  CSS 1px边框 由于Retina屏幕的出现,设置1px的边框,实际上却显示2px,有时就会略显粗壮,用JS可以进行处理,但兼[Read More]

standard

Sticky定位

Author : lovecicy

先来看个例子,在Safari或者火狐下打开哦: See the Pen CSS Sticky headers by YuC (@yuuuuc) on CodePen. 或者再看个例子:HTML5Rocks 先来解释下sticky定位的作用是什么:当用户滚动到某一位置时,某个元素就固定在页面上了。 这样的场景非常常见,比如iOS或者安卓的联系人,当你滚动时,对应的字母总在最顶端,当下一个字母上来时,会将前一个字母顶上去;或者BootStrap的文档页面,初始状态下,右边的菜单会随页面滚动而滚动,但是当菜单顶部滚动到页面顶部时,再往下滚,菜单就固定在页面顶部了。 通常(现在),我们的做法是使用js来监听用户的滚动事件,当滚动到某一高度,就将特定的元素设置为position:fixed。类似下面的做法: 这样的做法非常简单,但是如果你要对非常多的元素进行这样的操作,那将会是灾难性的。 为什么JS的做法不够好呢? Something else to consider is that more and more browsers are implementing hardware acceler[Read More]

standard

浅谈 PhoneGap

Author : luckyGirl

目前,混合应用 (Hybird App) 风生水起,一说到Hybird App最常被提起的应该就是PhoneGap了吧。PhoneGap是用基于HTML, CSS, Javascript来创建移动跨平台应用的开发平台,拥有丰富的插件,便于app使用智能手机的核心功能。而Cordova是贡献给Apache后免费开源项目是从PhoneGap中抽出的核心代码是驱动PhoneGap的核心引擎。 一、Cordova简介 Cordova适用于单个页面的应用程序(SPA),即取代页面跳转,而是运行时请求一个web页面,加载初始资源(HTML, CSS, Javascript),并通过ajax为页面更新。优势: 一套代码可跨多个平台,无需重新实现与每个平台的语言和工具集 拥有多种插件,便于web视图访问手机设备级API,如条码扫描器、NFC通信,麦克风等,如仍不能满足需要可按照Cordova插件结构自行开发 有许多前端库,方便开发,更加美观,如 AngularJS Ionic EmberJS Backbone Kendo UI Monaca ReactJS Sencha Touch jQuery Mo[Read More]

standard

防止IOS将数字识别成电话号码

Author : lovecicy

最近在用ionic做一个HTML5的应用,碰到一个问题,就是ios会将数字自动识别成电话号码,被识别的数字会被一个a标签嵌套,字体是黑色的,点击还能呼出电话功能。 可是这样的行为并不是我们期待的,怎么防止这个默认行为呢?只要在html的头部添加这个meta即可: 这样,ios就不会将数字自动检测为电话了。 PS. 顺便吐槽下ionic的文档,组织的太烂了。 参考: ionic forum

standard

HTML5 History API

Author : luckyGirl

HTML5 history API 出来已久,一直没用到就没仔细看,最近为了满足个蹩脚的需求,非hisotry不可,趁机就回顾并学习了下。 History API的属性以及方法: window.history.length: 返回会话历史集中的项目数量 window.history.state: 返回当前的状态对象 window.history.go([delta]): 在会话历史集中向后或向前步进指定的量;如果delta为0则重新加载当前页面;如果delta超过了允许的范围,什么也不做 window.history.back(): 在会话历史集中向后步进1;如果没有前一页,则什么也不做 window.history.forward(): 在会话历史集中向前步进1;如果没有下一页,则什么也不做 window.history.pushState(data,title,[,url]): 将给定的数据,按指定的标题及可选的URL压入会话历史中 window.history.replaceState(data,title,[,url]): 更新会话历史中的当前项,使之持有给定的数据、标题和可选[Read More]

standard

理解JS中的new

Author : lovecicy

上个月居然一篇文章都没发,罪过罪过,先补上一篇。 先来两句玩笑话: JavaScript和Java的关系就好像雷锋和雷峰塔的关系 我对JavaScript既爱又恨,它的优秀之处并非原创,它的原创之处并不优秀…… Brendan Eich 先来理解下第一句话:JS不是一门面向对象的语言,它是一种弱类型的脚本语言。但是它却采用了面向对象的思想,使用了new这个关键字。 第二句话,纯属好玩 ~(≧▽≦)/~ 好吧,言归正传,我们来聊一聊new的时候,到底发生了什么。先来看看下面这段代码: 总结来说,可以分为三个步奏,如下所示: 1. 创建一个空对象 首先,JS会创建一个空对象,将我们的变量指向这个空对象。这一步很简单,也很容易理解。 2. 修改proto属性 接着,将新对象的__proto__属性指向构造方法的prototype属性。这样,就可以通过原型链的方式访问原型对象中的属性和方法了。如果构造方法的prototype属性不是对象,那么就用Object.prototype对象替代。 3. 执行构造函数 最后一步,执行构造函数即Base()方法,并通过.call()方法,将新的对象传入,作[Read More]

standard

iPhone 6/Plus 的适配

Author : luckyGirl

最近用上高大上的iPhone6了,可是体验并不怎么理想,尤其是常用的APP:新浪微博和微信,字体大、图片模糊,与iPhone精致的调调一点不相配,归根结底就是一个问题 — 适配!今天Cicy就来初探下如何进行适配。 一、基本概念 首先我们先来了解下一些术语的基本概念: px:像素,屏幕上显示数据的最基本点 pt:point,印刷单位,1/72英寸,是个绝对单位 ppi:密度单位,图像分辨率,每英寸所包含的像素数目 dpi:密度单位,打印分辨率,每英寸能打印的点数 Retina:超高分辨率屏幕技术,iPhone从4就已开始应用 二、iPhone的复杂尺寸 之前基本按照宽度为640px为基准的视觉稿,基本连iPhone6都不能很好满足(怪不得在我手机上显示的图片好糊T_T) 三、手机淘宝的适配协作 看一下手机淘宝团队是如何协作的吧 第一步,视觉设计阶段,设计师按宽度750px(iPhone 6)做设计稿,除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注,输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿,在1125px的稿子里切图。 第二步,[Read More]

standard