第123天：移動web開發中的常見問題

 1、函數庫 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>

2、rem佈局

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

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

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

三大手機系統的字體：

• iOS 系統：
  • 默認中文字體是Heiti SC
  • 默認英文字體是Helvetica
  • 默認數字字體是HelveticaNeue
  • 無微軟雅黑字體
• Android 系統：
  • 默認中文字體是Droidsansfallback
  • 默認英文和數字字體是Droid Sans

  • 無微軟雅黑字體
• Winphone 系統：
  • 默認中文字體是Dengxian(方正等線體)
  • 默認英文和數字字體是Segoeod
  • 無微軟雅黑字體

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

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

二、移動端字體單位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     }
}

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

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

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

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

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

解決方案：

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

觸摸事件的響應順序：

1. ontouchstart
2. ontouchmove
3. ontouchend
4. onclick

解決300ms延遲的問題，也能夠經過綁定ontouchstart事件，加快對事件的響應。

六、 什麼是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}

 七、移動端如何取消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">

 八、關於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。

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

若是你不想用戶能夠選中頁面中的內容，那麼你能夠在css中禁掉：

.user-select-none {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all （移動端不須要） */
  -ms-user-select: none;      /* IE 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>

十一、屏幕旋轉的事件和樣式

• 事件：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{}
}

 十二、移動端常見的一些功能

• 搖一搖功能：

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

• 手機拍照和上傳圖片：

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

• 使用總結：

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

• 消除transition閃屏：

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

開啓硬件加速：

1. 解決頁面閃白。
2. 保證動畫流暢。

.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}

1三、如何禁止百度轉碼？

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

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

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