移動端開發註意事項

阿新 • • 發佈：2017-08-12

ror ng- wid 手動 ade scale conf storm 轉換

移動端開發中需要註意的事項，以及可能需要用到一些框架，尾部總結了一些主流框架，如果你覺得有用的話，請點擊推薦，謝謝！

一、關於meta

常見的公共meta屬性：

1、viewport

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屬性

1、第一個meta：

網站開啟對web app程序的支持。
如果content設置為yes，Web應用會以全屏模式運行，反之，則不會。content的默認值是no，表示正常顯示。你可以通過只讀屬性window.navigator.standalone來確定網頁是否以全屏模式顯示。

為了更好的兼容，兩個meta可以都寫上！

2、第二個meta：

在web app應用下狀態條（屏幕頂部條）的顏色；
默認值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
註意：若值為“black-translucent”將會占據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕為40px）。

三、IOS其他私有設置

添加主屏之後，桌面圖片和啟動畫面如何設置呢？

1、桌面圖標設置：

2、啟動畫面的設置：

四、其他瀏覽器私有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兼容處理

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

網址：http://phonegap.com/

6、appcan

網址：http://www.appcan.cn/

7、妹子Ui

網址：http://amazeui.org/

8、百度GMU

網址：http://gmu.baidu.com/

移動前端開發IDE

我用的是webstorm
比較流行的是sublime

前端開發環境

前端做好了之後，要根據後臺返回的接口來綁定頁面（也就是我們通常說的套頁面）。
假如後臺是java寫的，我們要搭建java環境
如果後臺是php寫的，我們要搭建php環境。

tochweb（手機網站）

web-app（phoneGap appcan打包成安卓apk和蘋果ios格式）

hybrid-app（主流）

native-app

八、移動端主流的css框架

1、bootstrap響應式布局

網址：http://www.bootcss.com

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

網址：http://zeptojs.com

2、jGestures

網址：http:jgestures.codeplex.com/

3、swiper

網址：http://www.swiper.com.cn

4、iscroll.js

網址：http://cubiq.org/iscroll-5
網址：http://iscrolljs.com/

移動端開發註意事項

移動端開發註意事項

一、關於meta

1、viewport

2、Format-detection

3、http-equiv

二、IOS私有meta屬性

1、第一個meta：

2、第二個meta：

三、IOS其他私有設置

1、桌面圖標設置：

2、啟動畫面的設置：

四、其他瀏覽器私有meta屬性【除非特需，一般不推薦使用】

1、QQ瀏覽器私有

2、UC瀏覽器私有

3、其它

五、關於樣式

1、上下拉動滾動條時卡頓、慢

2、禁止復制、選中文本

3、長時間按住頁面出現閃退

4、iphone及ipad下輸入框默認內陰影

5、ios和android下觸摸元素時出現半透明灰色遮罩

6、active兼容處理

7、動畫定義3D啟用硬件加速

8、Retina屏的1px邊框

9、旋轉屏幕時，字體大小調整的問題

10、transition閃屏

11、圓角bug

六、關於HTML5

七、移動端開發流行的框架

1、jqueryMobile

2、app framework

3、senchtouch

4、Mobile Angular UI

5、PhoneGap

6、appcan

7、妹子Ui

8、百度GMU

移動前端開發IDE

前端開發環境

八、移動端主流的css框架

1、bootstrap響應式布局

2、css3動畫

3、icon字體

4、css的SASS和Less框架

九、移動端主流的js框架

1、zeptiojs

2、jGestures

3、swiper

4、iscroll.js

相關推薦