當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

mobile web开发遇到的问题

發布時間：2024/3/13 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 mobile web开发遇到的问题小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

移動web開發之道（Android與Iphone）
1、javascript篇
（1）使用querySelector和querySelectorAll這兩個方法獲取文檔對象中DOM節點的引用

由于這兩個方法都是本地方法，因此在執行效率上比較理想

//獲得一個id為masthead的對象的引用： var masthead = document.querySelector( "#masthead " ); //獲得id為banner的UL元素下面最后一個LI元素下的A標簽的引用： var anchor = document.querySelector( "#banner > li:nth-last-child(1) > a " ); //獲得id為category的UL下面的所有LI元素的引用 var categoryList = document.querySelectorAll( "#category > li " );

（2）采用標準的W3C DOM2推薦的事件監聽模型監聽事件

//推薦的形式： window.addEventListener( "load " , function (e){ console.log( "page loaded " ); }, false ); //不推薦的形式： window.onload = function (e){ console.log( "page loaded " ); }

（3）HTML5 Form3 標準加入細化的表單控件檢測功能(如Email、URL、TEL等表單控件)，因此可直接使用內建的此類空間的驗證

//Email類型的表單控件: <input id= "email " type= "email " value= " " /> //URL類型的表單控件： <input id= "url " type= "url " value= " " /> //不能為空的表單控件： <input id= "name " type= "text " value= " " />

//驗證時，調用checkValidity方法查詢返回值即可： if (!document.querySelector( "#url " ).checkValidity()){ //failed }

（4）使用placeholder為表單文本輸入框空間提供默認提示值(通常情況下采用腳本操作完成)

為Email類型的表單控件提供一個提示值便于用戶識別:

（5）如果需要在用戶機器上保存數據，而且數據相對比較大，可以考慮使用本地存儲對象localStorage完成

相比cookie而言，localStorage具有編程接口友好，存儲空間大等優點

//調用示例: localStorage.setItem( "selectedTabIdx " ,3); //增加一項 localStorage.removeItem( "selectedTabIdx " ); //刪除一項

（6）使用內建支持的JSON API處理JSON數據

var point = { x:1, y:1 }; //將point對象序列化為JSON串 // {"x":0,"y":1} var coordinate = JSON.stringify (point); //將JSON串反序列化為point對象 var point = JSON.parse(data);

（7）使用標準的window.scrollY接口來獲取滾動條上部表示的文檔長度

document.documentElement.scrollTop或者document.body.scrollTop在safarimobile下此值為0
（8）使用__proto__屬性實現對象繼承

var Shape = function (){ } Shape.prototype = { draw: function (){ //… } } // Triangle繼承自Shape var Triangle = function (){ Shape.apply( this ,arguments); } Triangle.prototype = { __proto__:Shape.prototype, draw: function (){ //paint triangle } }

（9）對基本類型或內建DOM對象的擴展都應建立在對象的基礎上

由于智能手機平臺的腳本運行環境比較完善和符合規范(如DOM對象都是原生的本地對象,而在常規WEB平臺上, IE瀏覽器的部分JAVASCRIPT對象和DOM對象都是依賴COM組件實現，因此是不能直接擴展這些對象的)，例如：去除的字符串首位空白
建議的方法：

String.prototype.trim = function (){ return this .replace(/(?:^\s+|\s+$)/gi, "" ); };

調用示例:

var str =? "? string with leading and trailing whitespace? " ; str.trim();

不建議的方法：

var trim = function (str){ return str.replace(/(?:^\s+|\s+$)/gi, "" ); };

調用示例:

var str =? "? string with leading and trailing whitespace " ; var str = trim(str);

（10）在WEBKIT手機平臺上，使用DOM 對象操作的效率比innerHTML操作的效率要高

因此通常情況下，優先選擇DOM對象操作創建DOM樹例如向id為xyz的SPAN元素中添加1000鏈接, chrome在PC上的執行結果為

//采用innerHTML方式創建 var html = []; for ( var i = 0; i < 1000; i++){ html.push( "<a href=" \"javascript:void(0)\" ">" +i+ "</a>" ); } document.querySelector( "#xyz" ).innerHTML = html.join( "" ); //執行時間為22秒 //采用DOM節點對象操作的方式創建 var c = document.querySelector( "#xyz" ), anchor; for ( var i = 0; i < 1000; i++){ anchor = document.createElement( "a" ); anchor.textContent = i; c.appendChild(anchor); } //執行時間為14秒

（11）new WebKitCSSMatrix(window.getComputedStyle(dom).webkitTransform) 新建矩陣
（12）DOMSubtreeModified DOM文檔樹修改時執行事件，兼容IE9、FF、safari、chrom不支持opera
2、CSS篇
（1）使用CSS3 Media Query可以分別為手機橫屏模式(landscape)和豎屏模式(portrait)應用樣式, 是布局更加合理

#masthead{ Margin- top : 10px ; } /*單獨為橫屏(langscape)聲明樣式*/ @media screen and ( max-height : 300px ){ #masthead{ margin-top : 0 ; } }

（2）使用CSS創建漸變的背景圖片

.heading{ background : #F5F7FF -webkit-gradient(linear, 0% 0% , 0% 100% , from( white ), color-stop( 0.02 , #FAFCFF ), color-stop( 0.7 , #F4F6FF ), to( #F6F7FF ));}

（3）使用CSS3多層背景創建相對復雜的icon

.icon::before{ float : left ; margin : 2px 5px 0 0 ; content : "\20" ; width : 4px ; height : 14px ; text-indent : -999em ; background-image :-webkit-gradient(linear, left top , right top ,color-stop(. 0 , #9cdbfa ),color-stop(. 2 , #9cdbfa ),color-stop(. 21 , #58b3df ),color-stop(. 4 , #58b3df ),color-stop(. 41 , #007ac4 ),color-stop( 1.0 , #007ac4 )),-webkit-gradient(linear, left top , right top ,color-stop(. 0 , #9cff65 ),color-stop(. 2 , #9cff65 ),color-stop(. 21 , #5af703 ),color-stop(. 4 , #5af703 ),color-stop(. 41 , #46c500 ),color-stop( 1.0 , #46c500 )); background-position : 0 0 ; background-repeat : no-repeat ; -webkit-background- size : 100% 4px , 100% 100% ; }

（4）使用webkit提供的css canvas創建簡單圖片icon，例如：

預先在內存中創建Canvas對象

( function () { var a = 8; var a2 = a / 2; var ctx = document.getCSSCanvasContext( '2d' , 'triangle' , a2 + 2, a); ctx.fillStyle = '#46c500' ; ctx.strokeStyle = "#46c500" ; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, a); ctx.lineTo(a2, a/2); ctx.lineTo(0, 0); ctx.closePath(); ctx.fill(); ctx.stroke(); })();

使用CSS引用內存中的Canvas對象:

. icon { background :-webkit-canvas(triangle) 5px 50% no-repeat ; }

（5）采用base64編碼創建小圖片、icon

3、目前發現的一些bug

（1）G3(Android 1.5)版本touch事件的問題

G3(Android 1.5)版本，觸發touchstart事件之后，并沒有觸發touchmove事件，直接觸發touchend事件。在Android 1.5中，手指點擊事件觸發正常。但是手指移動時touchmove及touchend無法正常觸發，可能情況是觸發時間不正確或者事件觸發不連續。
解決方案：在touchstart事件中，對于事件參數e調用preventDefault方法，阻止觸發瀏覽器默認事件。
一點疑惑：該問題可能由于move的時候瀏覽器本身IO阻塞了正常程序的執行，后驗證確實會這樣，例如阻止鏈接的點擊
（2）Android 對絕對定位在文本框上的元素的ontouchstart事件

Android 對絕對定位在文本框上的元素的ontouchstart事件支持有badcase，當手指點擊該元素（文本框內的區域）的時候無法觸發該元素的ontouchstart事件，針對Android要用onmousedown解決。
（3）iPhone & Android 不支持position:fixed

（4）某些情況下，使用translate3D進行屏幕翻頁操作，會導致屏幕閃爍，解決辦法，改用普通的translate，但是會沒有硬件加速效果

（5）translate 的bug

發現在某一款ios上會出現此bug，itouch的4.1（8B117），發現在使用translate進行翻頁時，翻完后屏幕會閃爍下，使用 translate3d可以搞定這個問題，但是translate3d可能引入更多的問題，例如按鈕高亮錯誤，圖片渲染bug等，最后google一頓亂收，終于找到解決辦法：

-webkit-perspective: 1000 ; -webkit-backface- visibility : hidden ;

（6）JS在點擊鏈接時發送圖片請求來記錄點擊日志bug

但如果鏈接在當前窗口打開，就會出現日志缺失的情況，因為，如果跳轉較快，而圖片還沒來得及創建，改請求就不會發送
（a）先preventDefault，settimeout執行window.location.href=””
（b）onmousedown時即創建圖片請求
（7）android1.6下scalebug，當css如下寫時li為img的父級元素，調用scale后頁面空白

li{ overflow : hidden ; float : left ;} img{ position : absolute ;}

（8）scale會改變坐標系，比較混亂，沒搞明白到底什么樣的

（9）部分android手機上不能訪問內網域名，只能訪問ip地址

（10）Android手機window.innerWidth和window.innerHeight的bug

在屏幕旋轉時，返回的值并不是當前寬度和高度，而是旋轉之前的，通過下面方法可以解決，尋求更好的解決辦法：

var orientationEvent=( "onorientationchange" in window) ? "orientationchange" : "resize" ; window.addEventListener(orientationEvent, function (e){ setTimeout( function (){ alert(window.innerWidth); },500); }, false );

（11）阻止手機瀏覽器縮放，在頭部設置下述代碼，但某些高版本的手機上會失效（G12，G13）

（12）字體大小隨屏幕旋轉而變大,而且只是部分變大

在開發完頁面后,在iphone上,正常瀏覽頁面,沒有問題,但是當旋轉屏幕為風景模式時,發現有些字體變大,而有些則不變,很詭異吧其實是因為iphone會自適應font-size,解決辦法：

html {-webkit-text-size-adjust: none }

（13）translate使用3d坐標時會出現文字渲染的詭異bug

例如在通過translate進行手機上的翻頁功能時, 在safari手機可以看到字體變形，不過這個問題在手機上不會出現

-webkit-transform: translate 3 d( -334px , 0px , 0px );

去掉3d后即沒問題了

（14）iPhone & Android 不支持position:fixed

解決辦法，android上使用user-scalable設置為no，ios5支持，但是ios 4.2.1不好使，尋求高手指教
4、開發工具

（1）fiddler代理

就像pc端的fiddler代理功能一樣，手機上也可以使用代理，這樣可以更方便的進行遠程調試，更多細節：http://www.lovesunlife.com/?p=127
（2）weinre

這個工具非常的強大，也非常的適用，fiddler只能調試可以使用代理的手機，但目前很多android還不能使用代理，這時候不好調試，所以使用這時就需要使用wenire工具進行遠程調試，我使用的是linux機器，下面是weinre linux調試環境安裝方法:
（a）下載weinre https://github.com/downloads/phonegap/weinre/weinre-jar-1.5.0.zip
（b）tc-noah-info1.tc? /tmp/java6.tar.gz下載
（c）解壓縮java6
（d）配置環境變量vim ~/.bashrc

export JAVA_HOME=/home/img/liuhui/java6 export PATH= $JAVA_HOME</code><code class="php plain">/bin:</code><code class="php variable">$PATH export CLASSPATH=.: $JAVA_HOME</code><code class="php plain">/lib/tools.jar:</code><code class="php variable">$JAVA_HOME /lib/dt.jar: $CLASSPATH

（e）java -jar weinre.jar –httpPort 8081 –boundHost -all-
（f）運行后會提示訪問地址例如我的http://10.26.204.20:8081/
（g）在要調試的頁面引入js：http://10.26.204.20:8081/target/target-script-min.js#lh
然后通過http://10.26.204.20:8081/client/#lh
上面我搭建了自己的服務，其實官網提供了它自己的服務，只是速度會比較慢，更多詳情官網了解http://phonegap.github.com/weinre/

（3）各種書簽工具

這個工具可以讓你在手機中開啟firebug調試、yslow等，但我感覺還是比較適合pc端的調試 http://stevesouders.com/mobileperf/mobileperfbkm.php，這是國外一牛人匯總的各種書簽包括 firebug lite和yslow等

（4）在手機上調試還是沒法斷點，這時候可以在safari中通過修改useragent來進行手機上的仿真

偏好設置-》高級-》選中 “在菜單欄中顯示開發菜單 “，這時候在導航條中就可以看到開發了，點擊開發-》用戶代理-》選擇iphone，除了通過瀏覽器本身的設置來修改useragent外，還可以通過 fiddler修改rules-》user-agent》選擇iphone，如果沒有需要自己進行配置rules-》customize rules，在user-agent的配置項中增加下行代碼，

RulesStringValue(17, "&iphone" , "Mozilla/5.0 (iPod; U; CPU iPhone OS 4_0 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8A293 Safari/6531.22.7" )

更多user-agent值可參考： http://www.zytrax.com/tech/web/browser_ids.htm#safari

以上是匯總別人一些目前開發中遇到的問題，及最終解決辦法，對于初學mobile web開發的人，建議可以看下面博客，講解的非常詳細：

Part 1: The viewport metatag

Part 2: The mobile developer’s toolkit

Part 3: Designing buttons that don’t suck

Part 4: On designing a mobile webpage

Part 5: Using mobile-specific HTML, CSS, and JavaScript

Part 6: Dealing with device orientation

Part 7: Mobile JavaScript libraries and frameworks

分類: Html5+Css3, Javascript, Web App 標簽: mobile 好文要頂關注我收藏該文 radom
關注 - 3
粉絲 - 162 +加關注 0 0

? 上一篇：手機瀏覽器
? 下一篇： Web App和Native App 誰將是未來
</div><div class="postDesc">posted @ <span id="post-date">2012-03-02 01:00</span> <a href="http://www.cnblogs.com/radom/">radom</a> 閱讀(<span id="post_view_count">2587</span>) 評論(<span id="post_comment_count">0</span>) <a href="https://i.cnblogs.com/EditPosts.aspx?postid=2376494" rel="nofollow">編輯</a> <a href="#" onclick="AddToWz(2376494);return false;">收藏</a></div> </div> <script type="text/javascript">var allowComments=true,cb_blogId=53702,cb_entryId=2376494,cb_blogApp=currentBlogApp,cb_blogUserGuid='4e32f60b-0700-de11-9e4d-001cf0cd104b',cb_entryCreatedDate='2012/3/2 1:00:00';loadViewCount(cb_entryId);</script>

刷新評論刷新頁面返回頂部注冊用戶登錄后才能發表評論，請登錄或注冊，訪問網站首頁。【推薦】50萬行VC++源碼: 大型組態工控、電力仿真CAD與GIS源碼庫
【招募】2017云棲大會深圳峰會火熱報名中
【推薦】阿里云云盾幫您解讀WAF防護功能
width="300" height="250" vspace="0" hspace="0" scrolling="no" allowfullscreen="true" id="aswift_0"> 最新IT新聞:
· 2017年款iPad和iPad Air 2規格參數對比
· 比爾·蓋茨撰文批駁特朗普大幅削減對外援助經費
· 微軟向豐田授權專利欲成為車聯網技術關鍵供應商
· Facebook正在測試全新對話式評論界面
· Adobe擬用HoloLens打造個性化營銷
? 更多新聞… 最新知識庫文章:
· 程序員學習能力提升三要素
· 為什么我要寫自己的框架？
· 垃圾回收原來是這么回事
· 「代碼家」的學習過程和學習經驗分享
· 寫給未來的程序媛
? 更多知識庫文章… fixPostBody(); setTimeout(function () { incrementViewCount(cb_entryId); }, 50); deliverAdT2(); deliverAdC1(); deliverAdC2(); loadNewsAndKb(); loadBlogSignature(); LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid); GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate); loadOptUnderPost(); GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate); </div> </div><div id="sideBar"><div id="sideBarMain">

公告

網　名：ξ..命運ing.

年　齡：27歲

Q　 Q：329784240

E-mail：radom@139.com

座右銘：命是失敗者的借口，運是成功者的謙辭。

職　業：前端設計師

昵稱： radom
園齡： 8年1個月
粉絲： 162
關注： 3 +加關注 <div id="blog-calendar" style=""><table id="blogCalendar" class="Cal" cellspacing="0" cellpadding="0" title="Calendar"> <tbody><tr><td colspan="7"><table class="CalTitle" cellspacing="0"><tbody><tr><td class="CalNextPrev"><a href="javascript:void(0);" onclick="loadBlogCalendar('2012/02/01');return false;"><</a></td><td align="center">2012年3月</td><td class="CalNextPrev" align="right"><a href="javascript:void(0);" onclick="loadBlogCalendar('2012/04/01');return false;">></a></td></tr> </tbody></table></td></tr><tr><th class="CalDayHeader" align="center" abbr="日" scope="col">日</th><th class="CalDayHeader" align="center" abbr="一" scope="col">一</th><th class="CalDayHeader" align="center" abbr="二" scope="col">二</th><th class="CalDayHeader" align="center" abbr="三" scope="col">三</th><th class="CalDayHeader" align="center" abbr="四" scope="col">四</th><th class="CalDayHeader" align="center" abbr="五" scope="col">五</th><th class="CalDayHeader" align="center" abbr="六" scope="col">六</th></tr><tr><td class="CalOtherMonthDay" align="center">26</td><td class="CalOtherMonthDay" align="center">27</td><td class="CalOtherMonthDay" align="center">28</td><td class="CalOtherMonthDay" align="center">29</td><td align="center"><a href="http://www.cnblogs.com/radom/archive/2012/03/01.html"><u>1</u></a></td><td align="center"><a href="http://www.cnblogs.com/radom/archive/2012/03/02.html"><u>2</u></a></td><td class="CalWeekendDay" align="center">3</td></tr><tr><td class="CalWeekendDay" align="center">4</td><td align="center"><a href="http://www.cnblogs.com/radom/archive/2012/03/05.html"><u>5</u></a></td><td align="center">6</td><td align="center">7</td><td align="center"><a href="http://www.cnblogs.com/radom/archive/2012/03/08.html"><u>8</u></a></td><td align="center">9</td><td class="CalWeekendDay" align="center">10</td></tr><tr><td class="CalWeekendDay" align="center">11</td><td align="center"><a href="http://www.cnblogs.com/radom/archive/2012/03/12.html"><u>12</u></a></td><td align="center">13</td><td align="center">14</td><td align="center"><a href="http://www.cnblogs.com/radom/archive/2012/03/15.html"><u>15</u></a></td><td align="center">16</td><td class="CalWeekendDay" align="center">17</td></tr><tr><td class="CalWeekendDay" align="center">18</td><td align="center">19</td><td align="center"><a href="http://www.cnblogs.com/radom/archive/2012/03/20.html"><u>20</u></a></td><td align="center">21</td><td align="center">22</td><td align="center">23</td><td class="CalWeekendDay" align="center"><a href="http://www.cnblogs.com/radom/archive/2012/03/24.html"><u>24</u></a></td></tr><tr><td class="CalWeekendDay" align="center">25</td><td align="center">26</td><td align="center">27</td><td align="center">28</td><td align="center">29</td><td align="center"><a href="http://www.cnblogs.com/radom/archive/2012/03/30.html"><u>30</u></a></td><td class="CalWeekendDay" align="center">31</td></tr><tr><td class="CalOtherMonthDay" align="center">1</td><td class="CalOtherMonthDay" align="center">2</td><td class="CalOtherMonthDay" align="center">3</td><td class="CalOtherMonthDay" align="center">4</td><td class="CalOtherMonthDay" align="center">5</td><td class="CalOtherMonthDay" align="center">6</td><td class="CalOtherMonthDay" align="center">7</td></tr>

搜索

隨筆分類

Browser(23)
Html5+Css3(17)
Javascript(14)
Team(15)
Tools
UE\UI(4)
UX(42)
Web App(19)
Webrebuild(25)
前端性能(6)
重構人生(1)

隨筆檔案

2013年10月 (1)
2012年8月 (4)
2012年7月 (2)
2012年6月 (2)
2012年4月 (1)
2012年3月 (11)
2012年2月 (7)
2012年1月 (1)
2011年12月 (3)
2011年11月 (10)
2011年10月 (1)
2011年9月 (2)
2011年8月 (6)
2011年7月 (8)
2011年6月 (4)
2011年5月 (5)
2011年4月 (7)
2011年3月 (10)
2011年2月 (6)
2011年1月 (5)
2010年12月 (1)
2010年11月 (8)
2010年10月 (5)
2010年9月 (6)
2010年8月 (7)
2010年7月 (4)
2010年6月 (6)
2010年5月 (4)
2010年4月 (4)
2010年3月 (1)

積分與排名

積分 - 73676
排名 - 3452

閱讀排行榜

1. CSS實現背景透明，文字不透明（各瀏覽器兼容）(119209)
2. CSS3那些不為人知的高級屬性(32964)
3. js將數值格式化成金額形式(15701)
4. SWFObject參數(15447)
5. IE.JS解決IE兼容性問題方法(14065)

評論排行榜

1. 前端工程師的價值體現在哪里?(11)
2. CSS實現背景透明，文字不透明（各瀏覽器兼容）(5)
3. 如何面試前端工程師！(4)
4. 網頁制作規范整理(4)
5. CSS3那些不為人知的高級屬性(4)

總結

以上是生活随笔為你收集整理的mobile web开发遇到的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Web
Mobile

上一篇：微软Bing （chrome内核版）下
下一篇： Mac上下载百度云盘大文件百度云盘客户端

生活随笔