?一、函數(shù)庫 underscoreJS

_.template：

<ol class="carousel-indicators"><!--渲染的HTML字符串--> </ol> <div class="carousel-inner" role="listbox"><!--渲染的HTML字符串--> </div> /*取到模版當(dāng)中的字符串*/ var pointTemplateStr = $('#point_template').html(); var imageTemplateStr = $('#image_template').html(); /*轉(zhuǎn)化成模版函數(shù)*/ var pointTemplate = _.template(pointTemplateStr); var imageTemplate = _.template(imageTemplateStr); /*傳入數(shù)據(jù) 解析成 html 字符*/ var pointHtml = pointTemplate({model:data}); var imageHtml = imageTemplate({model:data,isMobile:isMobile});//我們只需要再加一個屬性 /*把html字符串渲染在頁面當(dāng)中*/ $('.carousel-indicators').html(pointHtml); $('.carousel-inner').html(imageHtml); <!--點模版--> <script type="text/template" id="point_template"><%_.each(model,function(obj,i){%><li data-target="#carousel-example-generic" data-slide-to="<%=i%>" class="<%=(i==0?'active':'')%>"></li><%})%> </script> <!--圖片模版--> <script type="text/template" id="image_template"><%_.each(model,function(obj,i){%><div class="item <%=(i==0?'active':'')%>"><% if(isMobile){ %><a href="#" class="m_imgBox"><img src="<%=obj.img%>" alt=""/></a><%} else {%><a href="#" class="pc_imgBox" style="background-image:url(<%=obj.bac%>)"></a><%}%></div><%})%> </script>

二、rem布局

準(zhǔn)備編輯這段時發(fā)現(xiàn)簡書上已經(jīng)有作者寫了關(guān)于rem布局的介紹，并且他的設(shè)置比我所用的更加簡潔，貼上地址供大家學(xué)習(xí)參考。
手機端頁面自適應(yīng)解決方案—rem布局進(jìn)階版（附源碼示例）

三、移動web開發(fā)中的常見問題

1、移動端如何定義字體font-family?

三大手機系統(tǒng)的字體：

• iOS 系統(tǒng)：
  • 默認(rèn)中文字體是Heiti SC
  • 默認(rèn)英文字體是Helvetica
  • 默認(rèn)數(shù)字字體是HelveticaNeue
  • 無微軟雅黑字體
• Android 系統(tǒng)：
  • 默認(rèn)中文字體是Droidsansfallback
  • 默認(rèn)英文和數(shù)字字體是Droid Sans
    
  • 無微軟雅黑字體
• Winphone 系統(tǒng)：
  • 默認(rèn)中文字體是Dengxian(方正等線體)
  • 默認(rèn)英文和數(shù)字字體是Segoeod
  • 無微軟雅黑字體

各個手機系統(tǒng)有自己的默認(rèn)字體，且都不支持微軟雅黑，如無特殊需求，手機端無需定義中文字體，使用系統(tǒng)默認(rèn)英文字體和數(shù)字字體可使用Helvetica，三種系統(tǒng)都支持。

/* 移動端定義字體的代碼 */ body{font-family:Helvetica; }

2、移動端字體單位font-size選擇px還是rem?

• 對于只需要適配手機設(shè)備，使用px即可。

• 對于需要適配各種移動設(shè)備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備。

• rem配置參考：

html {font-size:10px} @media screen and (min-width:480px) and (max-width:639px) {html {font-size: 15px} } @media screen and (min-width:640px) and (max-width:719px) {html {font-size: 20px} } @media screen and (min-width:720px) and (max-width:749px) {html {font-size: 22.5px} } @media screen and (min-width:750px) and (max-width:799px) {html {font-size: 23.5px} } @media screen and (min-width:800px) and (max-width:959px) {html {font-size: 25px} } @media screen and (min-width:960px) and (max-width:1079px) {html { font-size: 30px} } @media screen and (min-width:1080px) {html {font-size: 32px } }

4、移動端touch事件(區(qū)分webkit和winphone)有哪些？

當(dāng)用戶手指放在移動設(shè)備在屏幕上滑動會觸發(fā)的touch事件：

• 以下支持webkit：
  • touchstart——當(dāng)手指觸碰屏幕時候發(fā)生。不管當(dāng)前有多少只手指。
  • touchmove——當(dāng)手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面，會調(diào)用event``preventDefault()可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動。
  • touchend——當(dāng)手指離開屏幕時觸發(fā)。
  • touchcancel——系統(tǒng)停止跟蹤觸摸時候會觸發(fā)。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發(fā)該事件，這個事件比較少用。
• 以下支持winphone 8：
  • MSPointerDown——當(dāng)手指觸碰屏幕時候發(fā)生。不管當(dāng)前有多少只手指。
  • MSPointerMove——當(dāng)手指在屏幕上滑動時連續(xù)觸發(fā)。通常我們再滑屏頁面，會調(diào)用css的html{-ms-touch-action:none;}可以阻止默認(rèn)情況的發(fā)生：阻止頁面滾動。
  • MSPointerUp——當(dāng)手指離開屏幕時觸發(fā)。

5、如何解決移動端click屏幕產(chǎn)生200-300ms的延遲響應(yīng)問題？

移動設(shè)備上的web網(wǎng)頁是有300ms延遲的，往往會造成按鈕點擊延遲甚至是點擊失效。

解決方案：

• fastclick可以解決在手機上點擊事件的300ms延遲。
• zepto的touch模塊，tap事件也是為了解決在click的延遲問題。

觸摸事件的響應(yīng)順序：

ontouchstart

ontouchmove

ontouchend

onclick

解決300ms延遲的問題，也可以通過綁定ontouchstart事件，加快對事件的響應(yīng)。

6、 什么是Retina 顯示屏，帶來了什么問題？

retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變?yōu)槎鄠€，如在同樣帶下的屏幕上，蘋果設(shè)備的retina顯示屏中，像素點1個變?yōu)?個。

在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設(shè)計為傳統(tǒng)PC的2倍。

那么，前端的應(yīng)對方案是：

設(shè)計稿切出來的圖片長寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來的1/2。

//例如圖片寬高為：200px*200px，那么寫法如下 .css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px。

.css{font-size:20px}

?7、移動端如何取消touch高亮效果？

在做移動端頁面時，會發(fā)現(xiàn)所有a標(biāo)簽在觸發(fā)點擊時或者所有設(shè)置了偽類:active的元素，默認(rèn)都會在激活狀態(tài)時，顯示高亮框，如果不想要這個高亮，那么你可以通過css以下方法來進(jìn)行全局的禁止：

html {-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

ios用戶點擊一個鏈接，會出現(xiàn)一個半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設(shè)置為0就可以去除半透明灰色遮罩。

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

android用戶點擊一個鏈接，會出現(xiàn)一個邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來額效果不一樣，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果。

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-modify:read-write-plaintext-only; }

• -webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字符。

  另外，有些機型去除不了，如小米2。對于此類問題還有個辦法，不使用a或者input標(biāo)簽，直接用div標(biāo)簽。

• winphone系統(tǒng)a、input標(biāo)簽被點擊時產(chǎn)生的半透明灰色背景怎么去掉？

<meta name="msapplication-tap-highlight" content="no">

?8、關(guān)于webkit表單的幾個問題

• webkit表單元素的默認(rèn)外觀怎么重置？

.css{-webkit-appearance:none;}

webkit表單輸入框placeholder的顏色值能改變么？

input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEE}

webkit表單輸入框placeholder的文字能換行么？

iOS可以，Android不行。

如何禁止文本縮放？

當(dāng)移動設(shè)備橫豎屏切換時，文本的大小會重新計算，進(jìn)行相應(yīng)的縮放，當(dāng)我們不需要這種情況時，可以選擇禁止：

html { -webkit-text-size-adjust: 100%; }

• 需要注意的是，PC端的該屬性已經(jīng)被移除，該屬性在移動端要生效，必須設(shè)置meta viewport。

9、如何在移動端禁止用戶選中內(nèi)容？

如果你不想用戶可以選中頁面中的內(nèi)容，那么你可以在css中禁掉：

.user-select-none { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all （移動端不需要） */-ms-user-select: none; /* IE 10+ */ }

?10、如何模擬按鈕的hover效果？

移動端觸摸按鈕的效果，可明示用戶有些事情正要發(fā)生，是一個比較好體驗，但是移動設(shè)備中并沒有鼠標(biāo)指針，使用css的hover并不能滿足我們的需求，還好國外有個激活css的active效果，代碼如下：

<html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <style type="text/css"> a{-webkit-tap-highlight-color: rgba(0,0,0,0);} .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;} .btn-blue:active{background-color: #357AE8;} </style> </head> <body><div class="btn-blue">按鈕</div><script type="text/javascript"> document.addEventListener("touchstart", function(){}, true) </script> </body> </html> 兼容性ios5+、部分android 4+、winphone 8

要做到全兼容的辦法，可通過綁定ontouchstart和ontouchend來控制按鈕的類名。

<html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <style type="text/css"> a{-webkit-tap-highlight-color: rgba(0,0,0,0);} .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;} .btn-blue-on{background-color: #357AE8;} </style> </head> <body><div class="btn-blue">按鈕</div><script type="text/javascript"> var btnBlue = document.querySelector(".btn-blue"); btnBlue.ontouchstart = function(){this.className = "btn-blue btn-blue-on" } btnBlue.ontouchend = function(){this.className = "btn-blue" } </script> </body> </html>

11、屏幕旋轉(zhuǎn)的事件和樣式

• 事件：window.orientation，取值：正負(fù)90表示橫屏模式、0和180表現(xiàn)為豎屏模式。

window.onorientationchange = function(){switch(window.orientation){case -90:case 90:alert("橫屏:" + window.orientation);case 0:case 180:alert("豎屏:" + window.orientation);break;} }

?

樣式：

//豎屏?xí)r使用的樣式 @media all and (orientation:portrait) {.css{} }//橫屏?xí)r使用的樣式 @media all and (orientation:landscape) {.css{} }

?12、移動端常見的一些功能

• 搖一搖功能：

  HTML5 deviceMotion：封裝了運動傳感器數(shù)據(jù)的事件，可以獲取手機運動狀態(tài)下的運動加速度等數(shù)據(jù)。

• 手機拍照和上傳圖片：

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

• 使用總結(jié)：

• iOS有拍照、錄像、選取本地圖片功能。
• 部分android只有選取本地圖片功能。
• winphone不支持。
• input控件默認(rèn)外觀丑陋。

• 消除transition閃屏：

.css{/*設(shè)置內(nèi)嵌的元素在 3D 空間如何呈現(xiàn)：保留 3D*/-webkit-transform-style: preserve-3d;/*（設(shè)置進(jìn)行轉(zhuǎn)換的元素的背面在面對用戶時是否可見：隱藏）*/-webkit-backface-visibility: hidden; }

開啟硬件加速：

解決頁面閃白。

保證動畫流暢。

.css {-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}

android上去掉語音輸入按鈕：

input::-webkit-input-speech-button {display: none}

13、如何禁止百度轉(zhuǎn)碼？

<meta http-equiv="Cache-Control" content="no-siteapp" />

14、怎樣默認(rèn)優(yōu)先使用最新版本IE和Chrome？

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

?

轉(zhuǎn)載于:https://www.cnblogs.com/le220/p/8092994.html

總結(jié)

以上是生活随笔為你收集整理的第123天：移动web开发中的常见问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。