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

一、函數庫 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/*">

使用總結：
1. iOS 有拍照、錄像、選取本地圖檔功能。
2. 部分 android 隻有選取本地圖檔功能。
3. winphone 不支援。
4. 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" />

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

一、函數庫 underscoreJS

二、rem布局

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

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

2、移動端字型機關font-size選擇px還是rem?

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

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

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

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

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

9、如何在移動端禁止使用者選中内容？

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

11、螢幕旋轉的事件和樣式

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

13、如何禁止百度轉碼？

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

繼續閱讀

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

[轉]iOS微信小視訊優化心得

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

Android電視機（機頂盒）初次開發的一些經驗分享

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

android 主線程的相關問題

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條

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

一、函數庫 underscoreJS

二、rem布局

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

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

2、移動端字型機關font-size選擇px還是rem?

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

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

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

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

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

9、如何在移動端禁止使用者選中内容？

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

11、螢幕旋轉的事件和樣式

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

13、如何禁止百度轉碼？

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

繼續閱讀

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