Jun 29 2015

angular中自定定义服务service的方法以及比较

第一种 provider 方法
- 需要实现 this.$get 方法，并且此方法返回一个对象
- Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在service对象启用之前，先进行模块范围的配置，那就应该用 provider。
- 所有的provider都可以通过在后面添加后缀Provider串来传进.config().
  - 比如一个叫 xxx provider service, 需要写成 xxxProvider .
- 写法如图：
第二种 factory 方法
- Factory 方法直接把一个函数当成一个对象的 $get 方法, 可以直接返回字符串
- 用 Factory 就是创建一个对象，为它添加属性，然后把这个对象返回出来。你把 service 传进 controller 之后，在 controller 里这个对象里的属性就可以通过 factory 定义的 service 使用了。
- 写法如图：
第三种 service 方法
- Service 是用”new”关键字实例化的。因此，你应该给”this”添加属性，然后 service 返回”this”。你把 service 传进 controller 之后，在controller里 “this” 上的属性就可以通过 service 来使用了.
- 写法如图：

Jun 26 2015

移动web开发技巧收集

meta相关

设置viewport

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

设置格式检测format-detection

<meta name="format-detection" content="telephone=no,email=no,adress=no">

添加到主屏幕后，全屏显示

<meta name="apple-touch-fullscreen" content="yes">
<meta name="full-screen" content="yes">

开启webapp功能，全屏显示，删除默认的工具栏和菜单栏
```
<meta name="apple-mobile-web-app-capable" content="yes">
```

设置苹果状态栏显示样式为black

<meta name="apple-mobile-web-app-status-bar-style" content="black">

link相关(web app)

设置web应用程序的启动画面(对应不同设置使用不同size的图片)

<link rel="apple-touch-startup-image" size="640x1096" href="/startup5.png" media="(device-height:568px)">

<link rel="apple-touch-startup-image" size="640x920" href="/startup.png" media="(device-height:480px)">

添加至主屏幕(桌面)时的图标

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/touch-icon-57-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/touch-icon-72-precomposed.png">

各尺寸自适应代码：默认：57x57; iPad：72x72; iPhone 4和Retina屏：114x114（原尺寸的2倍）;

CSS相关

字体大小设置

html, body { font-size: 10px; }
otherElement { font-size: 1.4rem; }

实现网页在Safari快速滚动和回弹

body {
  position: relative;
  -webkit-overflow-scrolling: touch;
}

屏蔽ios和android下点击元素时出现的阴影

body { -webkit-tap-highlight-color: rgba(255,255,255,0); }

阻止旋转屏幕时自动调整字体大小

body { -webkit-text-size-adjust: 100%; }

禁止用户选中文字
```
body { -webkit-user-select:none; }
```
禁止长按屏幕出现系统菜单(可以：禁止用户保存图片,复制图片,在新窗口打开)
```
img { -webkit-touch-callout:none; }
```

屏蔽输入框怪异的内阴影

input,textarea { -webkit-appearance:none }

做高清图标(宽高各缩放到一半: 100 100 -> 50 50)
```
background-size
```
设置元素的宽高
```
-webkit-box-sizing: border-box;
```

DOM相关

自动大写与自动修正

<input type="text" autocapitalize="off" autocorrect="off" />

图片设置相关

通常情况下设计师在设计移动网页psd图片时要按照 320 320 的两倍来设计图片大小，即 640 640。然后从图片到页面的时候统一又缩放到一半，图片用 background-size 来设置或img标签，这样做可以放图片在不同尺寸的设备上显示差异不会太大。

一些实用技巧

让元素border包含在的指定的宽高范围内
```
border-size: border-box;
```

根据不同的设备宽度来改变根元素的字体大小

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
        };

    // Abort if browser does not support addEventListener
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

Retina屏幕一像素问题完美解决方案(用这种方法的话，所有的长度单位都必须用rem)

//根据屏幕大小及dpi调整缩放和大小, 由于dpr=3时候，经过缩放处理界面会变得非常模糊，所以dpr>=2时做相同处理
(function() {
    var scale = 1.0;
    var ratio = 1;
    if (window.devicePixelRatio >= 2) {
        scale *= 0.5;
        ratio *= 2;
    }
    var text = '<meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" />';
    document.write(text);
    document.documentElement.style.fontSize = 50*ratio + "px";
})();