<rp id="ez6ub"></rp>

    1. 當前位置:主頁 > 學無止境 > 移動端開發需要注意的一些事情

      移動端開發需要注意的一些事情

      時間:1473255567瀏覽:155次 admin

      不知不覺,做移動端開發也有半年的時間了。從剛開始接觸移動端開發,到現在的細節完善。期間也走了很多坑!為什么會走這么多坑呢?

      可能身邊做前端開發的朋友比較少,想找個人一起研究技術的都沒。也加過一些前端群,大多數些扯淡聊天的群。沒辦法,只得自己去苦逼的研究!

      下面一起來分享下,我做移動端開發半年來的一些經驗,以及需要注意的一些東西吧!

       

      一、關于單位的使用

      相信只要做過移動端開發的人,或者剛入門的新手朋友們,最糾結的問題是在于“字體”單位的選擇!為什么會這樣說呢?

      可能在傳統的PC端來說,1px=1px的比例。而在移動端卻不是這樣,1px = ?。 因為出現了一個像素密度這樣個東西,就不能在移動端使用“PX”這個單位。可能在你的大屏手機是1px等于1點幾個像素,可能在小屏手機卻剛好。就好比網頁的兼容性一樣,瀏覽器的內核不同,解析當然會有所不同!

      正好,CSS3又給你出現了一個新的單位“rem”。如果有對rem還有不怎么了解的朋友,可以看看這篇文章。

      當然出現了這樣的問題,首先我們就會去問問神奇的“百度”。不是網上流傳這樣一個段子么:“有事找度娘,無事上度娘!”,好吧,我又邪惡了!回歸正題,大多數網友給出的答案是:“給html根元素的字體大小設置font-size:62.5%,再來使用rem這個單位就能很好的解決這個問題!”

      這樣設置后:就會得到一個兌換比例值:1rem = 10px; 如果我們要給一個"h1"標簽設置字體大小為20px的時候。我們就直接設置為rem就好了!

      代碼如下:

          html{font-size:62.5%;}
          
          h1{fon-size:2rem} ==>h1{fon-size:20px}

                 代碼布局

       

      二、布局上

        相信布局不用我多說什么了,就按照正常的網頁布局來寫,一般設計師給的效果圖是640*960.我們就按照320的比例來做,就是寬度減少一半??赡芏鄶等烁?span style="text-indent: 2em;">之前是一樣,字體用單位“rem”。其它照樣使用px這個單位。好吧!最近又被嚴格的UI設計師,找出問題來了,你怎么這里跟我效果圖對不上呀!....

      好吧!原來想偷工減料的就這樣寫的,沒辦法,既然被嚴格的查起來了,又得去找解決方案!(可能之前也沒太在意這些細節,一直就這樣拖著)

      暫時找了個合適的解決方案,這樣既解決了字體單位的問題,又兼容單位像素的問題!,只是換算麻煩點!

      比如:我們要設置一個寬度為60px的盒子.換算成rem單位就是:60/2/20 = 1.5rem; 前提是我們需要在頭部添加以下代碼:

      PS:效果圖實際像素為60px,在手機端就是30px,在轉化成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;
             }
         }

          可能還有更好的解決方案,暫時沒找到更好的方案...

                              移動端開發需要注意的一些事情

       

      三、細節處理

          可能處理細節就是在解決兼容性的問題吧!還好手機端沒有蹦出個IE來,基本都是webkit內核和IOS自帶的瀏覽器。

       

      1、禁止自動識別電話和android自動識別郵箱

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

       

       2、使用無襯線字體

          body {
             font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
          }

      iOS 4.0+ 使用英文字體 Helvetica Neue,之前的iOS版本降級使用 Helvetica。中文字體設置為華文黑體STHeiTi。需補充說明,華文黑體并不存在iOS的字體庫中,但系統會自動將華文黑體 STHeiTi 兼容命中系統默認中文字體黑體-簡或黑體-繁

          Heiti SC Light 黑體-簡 細體 (iOS 7后廢棄)
          Heiti SC Medium 黑體-簡 中黑
          Heiti TC Light 黑體-繁 細體
          Heiti TC Medium 黑體-繁 中黑

      原生Android下中文字體與英文字體都選擇默認的無襯線字體

      4.0 之前版本英文字體原生 Android 使用的是 Droid Sans,中文字體原生 Android 會命中 Droid Sans Fallback

      4.0 之后中英文字體都會使用原生 Android 新的 Roboto 字體

      其他第三方 Android 系統也一致選擇默認的無襯線字體

       

      3、禁止選擇文本

          html, body {
             -webkit-user-select: none;   /* 禁止選中文本(如無文本選中需求,此為必選項) */
             user-select: none;
          }

       

      4、禁止長按鏈接與圖片彈出菜單

          a, img {
             -webkit-touch-callout: none; /* 禁止長按鏈接與圖片彈出菜單 */
          }

       

      5、去除A連接input標簽,點擊出現自帶的陰影樣式

          a,input{
          -webkit-tap-highlight-color:rgba(0,0,0,0);/*ios android去除自帶陰影的樣式*/
          }

      6、屏蔽陰影:

          -webkit-appearance:none;

          可以同時屏蔽輸入框怪異的內陰影,解決iOS下無法修改按鈕樣式,測試還發現一個小問題就是,加了上面的屬性后,iOS下默認還是帶有圓角的,不過可以使用 border-radius屬性修改。

       

      7、單擊延遲

      click 事件因為要等待雙擊確認,會有 300ms 的延遲,體驗并不是很好。

      開發者大多數會使用封裝的 tap 事件來代替click 事件,所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。

       

      8、手機拍照和上傳圖片

          <input type=”file”>的accept 屬性
          <!-- 選擇照片 -->
          <input type=file accept="image/*">
          <!-- 選擇視頻 -->
          <input type=file accept="video/*">

       

      html5模板代碼

      <!DOCTYPE HTML>
      <html>
      <head>
          <!--申明當前頁面的編碼集-->
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <!--網頁標題-->
          <title>HTML5移動端開發模板</title>
          <!--網頁關鍵詞-->
          <meta name="keywords" content="" />
          <!--網頁描述-->
          <meta name="description" content="" />
          <!--適配當前屏幕-->
          <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
          <!--禁止自動識別電話號碼-->
          <meta name="format-detection" content="telephone=no" />
          <!--禁止自動識別郵箱-->
          <meta content="email=no" name="format-detection" />
          <!--iphone中safari私有meta標簽,
              允許全屏模式瀏覽,隱藏瀏覽器導航欄-->
          <meta name="apple-mobile-web-app-capable" content="yes" />
          <!--iphone中safari頂端的狀態條的樣式black(黑色)-->
          <meta name="apple-mobile-web-app-status-bar-style" content="black">
          <style type="text/css">
          /*reset 重置*/
          body,ul,ol,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea,
          td,th,button,strong,em,select,video,canvas{margin:0;padding:0;}
          li{list-style:none;vertical-align:top;}
          table{ border-collapse:collapse;}
          textarea{resize:none;overflow:auto;}
          img{ border:none; vertical-align:middle;}
          em{ font-style:normal;}
          a{ text-decoration:none;}
          a,input{
          -webkit-appearance: none;/*屏蔽陰影*/
          -webkit-tap-highlight-color:rgba(0,0,0,0);
          /*ios android去除自帶陰影的樣式*/
          }
          a, img {
          /* 禁止長按鏈接與圖片彈出菜單 */
          -webkit-touch-callout: none; 
          
          }
          html, body {
          /* 禁止選中文本(如無文本選中需求,此為必選項) */
          -webkit-user-select: none;  
          user-select: none;
          }
          /*public*/
          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; 
          }
          }
          body{font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif; 
          overflow-x:hidden; overflow-y:auto; font-size:0.7rem;
          }
          .clear{zoom:1;}
          .clear:after{content:''; display:block; clear:both;}
          .fl{float:left;}
          .fr{float:right;}
          .viewport{ max-width:640px; margin:0 auto; overflow-x:hidden;}
          </style>
      </head>
      <body>
          <div>
              <div>這是一個移動端開發模板喲!</div>
          </div>
      </body>
      </html>

          再次覺得一個人苦逼的研究太累了,沒有方向,可能會浪費大量的時間在做研究和測試上,但是也有一些樂趣在里面!對于學習和成長不失為一個很好的辦法。

          同時也感謝昨天“輝”這位朋友,對于我博客文章的打賞。這應該是建博客以來:第二位朋友對于我博客文章的打賞了,從最初的建博客開始,我一天也沒想到自己寫的文章會得到相對應的回報!這可能就是“非以其無私邪,故能成其私”的道理吧!

      寫在最后:之前很多朋友都在問我:做網站怎么去盈利(賺錢),我告訴他們:要有一個“利他”之心。無私的幫他他人,不求回報,錢這個東西都是順帶的!這就是“道”需要去時間和經歷去感悟。---以上純屬“段亮”個人見解,不喜勿噴!如有不足之處,歡迎指出。共勉!!

      關于博主

      博主

      博主:江洪宇

      職業:SEO優化、個人站長

      簡介:個人草根站長

      aⅴ在线东京热男人的天堂