開發(fā)者分享：移動(dòng)端開發(fā)踩坑記
不知不覺，做移動(dòng)端開發(fā)也有半年的時(shí)間了。從剛開始接觸移動(dòng)端開發(fā)，到現(xiàn)在的細(xì)節(jié)完善。期間也走了很多坑！為什么會(huì)走這么多坑呢？
可能身邊做前端開發(fā)的朋友比較少，想找個(gè)人一起研究技術(shù)的都沒。也加過一些前端群，大多數(shù)些扯淡聊天的群。沒辦法，只得自己去苦逼的研究！
下面一起來分享下，我做移動(dòng)端開發(fā)半年來的一些經(jīng)驗(yàn)，以及需要注意的一些東西吧！
一、關(guān)于單位的使用
相信只要做過移動(dòng)端開發(fā)的人，或者剛?cè)腴T的新手朋友們，最糾結(jié)的問題是在于“字體”單位的選擇！為什么會(huì)這樣說呢?
可能在傳統(tǒng)的PC端來說，1px=1px的比例。而在移動(dòng)端卻不是這樣，1px = ?。 因?yàn)槌霈F(xiàn)了一個(gè)像素密度這樣個(gè)東西，就不能在移動(dòng)端使用“PX”這個(gè)單位?？赡茉谀愕拇笃潦謾C(jī)是1px等于1點(diǎn)幾個(gè)像素，可能在小屏手機(jī)卻剛好。就好比網(wǎng)頁的兼容性一樣，瀏覽器的內(nèi)核不同，解析當(dāng)然會(huì)有所不同！
正好，CSS3又給你出現(xiàn)了一個(gè)新的單位“rem”。如果有對(duì)rem還有不怎么了解的朋友，可以看看這篇文章：《Web app變革之rem》。
當(dāng)然出現(xiàn)了這樣的問題，首先我們就會(huì)去問問神奇的“百度”。不是網(wǎng)上流傳這樣一個(gè)段子么:“有事找度娘，無事上度娘！”，好吧，我又邪惡了！回歸正題，大多數(shù)網(wǎng)友給出的答案是:“給html根元素的字體大小設(shè)置font-size:62.5%，再來使用rem這個(gè)單位就能很好的解決這個(gè)問題！”
這樣設(shè)置后:就會(huì)得到一個(gè)兌換比例值:1rem = 10px; 如果我們要給一個(gè)"h1"標(biāo)簽設(shè)置字體大小為20px的時(shí)候。我們就直接設(shè)置為rem就好了！
代碼如下:
- html{font-size:62.5%;}
- h1{fon-size:2rem} ==>h1{fon-size:20px}
二、布局上
相信布局不用我多說什么了，就按照正常的網(wǎng)頁布局來寫，一般設(shè)計(jì)師給的效果圖是640*960.我們就按照320的比例來做，就是寬度減少一半?？赡芏鄶?shù)人跟我之前是一樣，字體用單位“rem”。其它照樣使用px這個(gè)單位。好吧！最近又被嚴(yán)格的UI設(shè)計(jì)師，找出問題來了，你怎么這里跟我效果圖對(duì)不上呀！....
好吧！原來想偷工減料的就這樣寫的，沒辦法，既然被嚴(yán)格的查起來了，又得去找解決方案！(可能之前也沒太在意這些細(xì)節(jié)，一直就這樣拖著)
暫時(shí)找了個(gè)合適的解決方案，這樣既解決了字體單位的問題，又兼容單位像素的問題，只是換算麻煩點(diǎn)！
比如:我們要設(shè)置一個(gè)寬度為60px的盒子.換算成rem單位就是:60/2/20 = 1.5rem; 前提是我們需要在頭部添加以下代碼:
PS:效果圖實(shí)際像素為60px，在手機(jī)端就是30px，在轉(zhuǎn)化成rem單位就在除以20。
- html {
- font-size : 20px;
- }
- @media only screen and (min-width: 401px){
- html {
- font-size: 25px !important;
- }
- }
- @media only screen and (min-width: 428px){
- html {
- font-size: 26.75px !important;
- }
- }
- @media only screen and (min-width: 481px){
- html {
- font-size: 30px !important;
- }
- }
- @media only screen and (min-width: 569px){
- html {
- font-size: 35px !important;
- }
- }
- @media only screen and (min-width: 641px){
- html {
- font-size: 40px !important;
- }
- }
可能還有更好的解決方案,暫時(shí)沒找到更好的方案...
三、細(xì)節(jié)處理
可能處理細(xì)節(jié)就是在解決兼容性的問題吧！還好手機(jī)端沒有蹦出個(gè)IE來，基本都是webkit內(nèi)核和IOS自帶的瀏覽器。
1、禁止自動(dòng)識(shí)別電話和android自動(dòng)識(shí)別郵箱
- <br>
2、使用無襯線字體
|
|
|
iOS 4.0+ 使用英文字體 Helvetica Neue，之前的iOS版本降級(jí)使用 Helvetica。中文字體設(shè)置為華文黑體STHeiTi。需補(bǔ)充說明，華文黑體并不存在iOS的字體庫中，但系統(tǒng)會(huì)自動(dòng)將華文黑體 STHeiTi 兼容***系統(tǒng)默認(rèn)中文字體黑體-簡或黑體-繁
- Heiti SC Light 黑體-簡 細(xì)體 (iOS 7后廢棄)
- Heiti SC Medium 黑體-簡 中黑
- Heiti TC Light 黑體-繁 細(xì)體
- Heiti TC Medium 黑體-繁 中黑
原生Android下中文字體與英文字體都選擇默認(rèn)的無襯線字體
4.0 之前版本英文字體原生 Android 使用的是 Droid Sans，中文字體原生 Android 會(huì)*** Droid Sans Fallback
4.0 之后中英文字體都會(huì)使用原生 Android 新的 Roboto 字體
其他第三方 Android 系統(tǒng)也一致選擇默認(rèn)的無襯線字體
3、禁止選擇文本
- html, body {
- -webkit-user-select: none; /* 禁止選中文本(如無文本選中需求,此為必選項(xiàng)) */
- user-select: none;
- }
4、禁止長按鏈接與圖片彈出菜單
- a, img {
- -webkit-touch-callout: none; /* 禁止長按鏈接與圖片彈出菜單 */
- }
5、去除A連接input標(biāo)簽，點(diǎn)擊出現(xiàn)自帶的陰影樣式
- a,input{
- -webkit-tap-highlight-color:rgba(0,0,0,0);/*ios android去除自帶陰影的樣式*/
- }
6、屏蔽陰影:
- -webkit-appearance:none;
可以同時(shí)屏蔽輸入框怪異的內(nèi)陰影，解決iOS下無法修改按鈕樣式，測試還發(fā)現(xiàn)一個(gè)小問題就是，加了上面的屬性后，iOS下默認(rèn)還是帶有圓角的，不過可以使用 border-radius屬性修改。
7、單擊延遲
click 事件因?yàn)橐却p擊確認(rèn)，會(huì)有 300ms 的延遲，體驗(yàn)并不是很好。
開發(fā)者大多數(shù)會(huì)使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。
8、手機(jī)拍照和上傳圖片
HTML5模板代碼：點(diǎn)擊下載。
再次覺得一個(gè)人苦逼的研究太累了，沒有方向，可能會(huì)浪費(fèi)大量的時(shí)間在做研究和測試上，但是也有一些樂趣在里面！對(duì)于學(xué)習(xí)和成長不失為一個(gè)很好的辦法。
