?一、函數庫 underscoreJS

_.template：

<ol class="carousel-indicators"><!--渲染的HTML字符串--> </ol> <div class="carousel-inner" role="listbox"><!--渲染的HTML字符串--> </div> /*取到模版當中的字符串*/ var pointTemplateStr = $('#point_template').html(); var imageTemplateStr = $('#image_template').html(); /*轉化成模版函數*/ var pointTemplate = _.template(pointTemplateStr); var imageTemplate = _.template(imageTemplateStr); /*傳入數據 解析成 html 字符*/ var pointHtml = pointTemplate({model:data}); var imageHtml = imageTemplate({model:data,isMobile:isMobile});//我們只需要再加一個屬性 /*把html字符串渲染在頁面當中*/ $('.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布局

準備編輯這段時發現簡書上已經有作者寫了關于rem布局的介紹，并且他的設置比我所用的更加簡潔，貼上地址供大家學習參考。
手機端頁面自適應解決方案—rem布局進階版（附源碼示例）

三、移動web開發中的常見問題

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

三大手機系統的字體：

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

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

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

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

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

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

• 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事件(區分webkit和winphone)有哪些？

當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件：

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

5、如何解決移動端click屏幕產生200-300ms的延遲響應問題？

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

解決方案：

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

觸摸事件的響應順序：

ontouchstart

ontouchmove

ontouchend

onclick

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

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

retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變為多個，如在同樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變為4個。

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

那么，前端的應對方案是：

設計稿切出來的圖片長寬保證為偶數，并使用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高亮效果？

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

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

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

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

android用戶點擊一個鏈接，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設置-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標簽，直接用div標簽。

• winphone系統a、input標簽被點擊時產生的半透明灰色背景怎么去掉？

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

?8、關于webkit表單的幾個問題

• webkit表單元素的默認外觀怎么重置？

.css{-webkit-appearance:none;}

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

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

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

iOS可以，Android不行。

如何禁止文本縮放？

當移動設備橫豎屏切換時，文本的大小會重新計算，進行相應的縮放，當我們不需要這種情況時，可以選擇禁止：

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

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

9、如何在移動端禁止用戶選中內容？

如果你不想用戶可以選中頁面中的內容，那么你可以在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效果？

移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，但是移動設備中并沒有鼠標指針，使用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、屏幕旋轉的事件和樣式

• 事件：window.orientation，取值：正負90表示橫屏模式、0和180表現為豎屏模式。

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

?

樣式：

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

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

• 搖一搖功能：

  HTML5 deviceMotion：封裝了運動傳感器數據的事件，可以獲取手機運動狀態下的運動加速度等數據。

• 手機拍照和上傳圖片：

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

• 使用總結：

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

• 消除transition閃屏：

.css{/*設置內嵌的元素在 3D 空間如何呈現：保留 3D*/-webkit-transform-style: preserve-3d;/*（設置進行轉換的元素的背面在面對用戶時是否可見：隱藏）*/-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、如何禁止百度轉碼？

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

14、怎樣默認優先使用最新版本IE和Chrome？

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

?

轉載于:https://www.cnblogs.com/le220/p/8092994.html

總結

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

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