標籤：strong nim 精確 search 注意 angular ipa images 架構
移動端開發中需要注意的事項，以及可能需要用到一些架構，尾部總結了一些主流架構，如果你覺得有用的話，請點擊推薦，謝謝！
一、關於meta
常見的公用meta屬性：
1、viewport
<meta name="viewport" content="width-device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
- width=device-width 寬度是裝置螢幕的寬度（像素）
- height =device-height 高度時裝置螢幕的高度（像素）
- initial-scale 初始的縮放比例
- minimum-scale 允許使用者縮放到的最小比例
- maximum-scale 允許使用者縮放到的最大比例
- user-scaleable 使用者是否可以手動縮放
2、Format-detection
format-detection翻譯成中文的意思是“格式檢測”，顧名思義，它是用來檢測html裡的一些格式的，那關於meta的format-detection屬性主要是有以下幾個設定：
- meta name="format-detection" content="telephone=no"
- meta name="format-detection" content="email=no"
- meta name="format-detection" content="adress=no"
- 也可以連寫：meta name="format-detection" content="telephone=no,email=no,adress=no"
如下：<a href="tel:4008106999,1034">400-810-6999 轉 1034</a>
- 撥打手機直接如下
<a href="tel:15677776767">點擊撥打15677776767</a>
安卓手機會直接到號碼輸入撥打的介面。
點擊撥號蘋果手機就會出現如：
3、http-equiv
- http-equiv顧名思義，相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以協助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變數值。 meat標籤的http-equiv屬性文法格式是：＜meta http-equiv="參數" content="參數變數值"＞ ；
- 這個屬性是很老的屬性了，一般手機網頁都是要有一定緩衝的，所以這個可以不用設定
二、IOS私人meta屬性<meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" />
1、第一個meta：<meta name="apple-mobile-web-app-capable" content="yes" />說明：
- 網站開啟對web app程式的支援。
- 如果content設定為yes，Web應用會以全螢幕模式運行，反之，則不會。content的預設值是no，表示正常顯示。你可以通過唯讀屬性window.navigator.standalone來確定網頁是否以全螢幕模式顯示。
2、第二個meta：<meta name="apple-mobile-web-app-status-bar-style" content="black" />說明：
- 在web app應用下狀態條（螢幕頂部條）的顏色；
- 預設值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
- 注意：若值為“black-translucent”將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina螢幕為40px）。
三、IOS其他私人設定
添加主屏之後，案頭圖片和啟動畫面如何設定呢？1、案頭表徵圖設定：<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />兩者的區別如下：第一種會有一個光感，第二種是設計原圖顯示！2、啟動畫面的設定：<link rel="apple-touch-startup-image" href="milanoo_startup.png" />當然，可以指定不同尺寸。
四、其他瀏覽器私人meta屬性【除非特需，一般不推薦使用】
1、QQ瀏覽器私人
- 全螢幕模式：<meta name="x5-fullscreen" content="true">
- 強制豎屏：<meta name="x5-orientation" content="portrait">
- 強制橫屏：<meta name="x5-orientation" content="landscape">
- 應用模式：<meta name="x5-page-mode" content="app">
2、UC瀏覽器私人
- 全螢幕模式：<meta name="full-screen" content="yes">
- 強制豎屏：<meta name="screen-orientation" content="portrait">
- 強制橫屏：<meta name="screen-orientation" content="landscape">
- 應用模式：<meta name="browsermode" content="application">
3、其它針對手持功能最佳化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓
<meta name="HandheldFriendly" content="true">
微軟的老式瀏覽器
<meta name="MobileOptimized" content="320">
windows phone 點擊無高光
<meta name="msapplication-tap-highlight" content="no">五、關於樣式
1、上下拉動捲軸時卡頓、慢body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
2、禁止複製、選中文本Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
解決行動裝置可選中頁面文本(視產品需要而定)
3、長時間按住頁面出現閃退element {
-webkit-touch-callout: none;
}
4、iphone及ipad下輸入框預設內陰影Element{
-webkit-appearance: none;
}
5、ios和android下觸摸元素時出現半透明灰色遮罩Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
設定alpha值為0就可以去除半透明灰色遮罩，備忘：transparent的屬性值在android下無效。
6、active相容處理<body ontouchstart="">
7、動畫定義3D啟用硬體加速Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
注意：3D變形會消耗更多的記憶體與功耗
8、Retina屏的1px邊框Element{
border-width: thin;
}
9、旋轉螢幕時，字型大小調整的問題html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
10、transition閃屏/設定內嵌的元素在 3D 空間如何呈現：保留3D /
-webkit-transform-style: preserve-3d; / 設定進行轉換的元素的背面在面對使用者時是否可見：隱藏 /
-webkit-backface-visibility:hidden;
11、圓角bug某些Android手機圓角失效
background-clip: padding-box;六、關於HTML5
HTML5 中的一些有趣的新特性：
1、用於繪畫的 canvas 元素
2、用於媒介回放的 video 和 audio 元素demo:<video width="320" height="240" controls="controls">
你瀏覽器不支援video
</video> 同理：<audio controls="controls">
你瀏覽器不支援audio
</audio>
3、對本地離線儲存的更好的支援
4、地理定位 navigator.geolocation.getCurrentPosition(callback,error,options)
5、新的特殊內容元素，比如 article、footer、header、nav、section
6、新的表單控制項：
- email
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
七、移動端開發流行的架構1、jqueryMobile
- 網址：http://api.jquerymobile.com/
2、app framework
- 網址：http://app-framework-software.intel.com/
3、senchtouch
- 網址：http://www.sencha.com/
4、Mobile Angular UI
- 網址：http://mobileangularui.com/docs/
5、PhoneGap
6、appcan
7、妹子Ui
8、百度GMU
移動前端開發IDE
- 我用的是webstorm
- 比較流行的是sublime
前端開發環境
- 前端做好了之後，要根據後台返回的介面來綁定頁面（也就是我們通常說的套頁面）。
- 假如後台是java寫的，我們要搭建java環境
- 如果後台是php寫的，我們要搭建php環境。
tochweb（手機網站）
web-app（phoneGap appcan打包成安卓apk和蘋果ios格式）
hybrid-app（主流）
native-app
八、移動端主流的css架構1、bootstrap響應式布局
2、css3動畫
- 網址：http://www.haorooms.com/uploads/example/Animatecss/
- 更多架構：http://nec.netease.com/framework
3、icon字型
- 網址：http://fontawesome.io/
- 網址：http://www.iconfont.cn/
4、css的SASS和Less架構九、移動端主流的js架構1、zeptiojs
2、jGestures
- 網址：http:jgestures.codeplex.com/
3、swiper
- 網址：http://www.swiper.com.cn
4、iscroll.js
- 網址：http://cubiq.org/iscroll-5
- 網址：http://iscrolljs.com/
移動端開發注意事項
