移動Web深度剖析

時間  2019-11-05
標籤 移動 web 深度 剖析 欄目 無線 简体版
原文   原文鏈接

隨着前端技術的急速發展，隨着互聯網行業的日益發展，HTML5做爲一種比較新型的開發技術早已經被不少大的企業所應用，經過HTML5語言能夠開發適用於任何設備上的酷炫網站頁面，因此HTML5的發展趨勢可想而知。話說HTML5推出了也好長一段時間了，如今還拿出來炒冷飯O(∩_∩)O哈哈~css

HTML5與SEO

爲了更好地處理今天的互聯網應用，HTML5添加了不少新元素及功能，好比：圖形的繪製，多媒體內容，更好的頁面結構，更好的形式處理，和幾個Api拖放元素，定位，包括網頁 應用程序緩存，存儲，網絡工做者。HTML5推出一個很重要的概念就是語義化標籤。這一律念給網頁的SEO帶來了很大的幫助。html

使搜索引擎更加容易抓取和索引前端

對於一些網站，特別是那些嚴重依賴於FLASH的網站HTML5是一個大福音。若是你有一個都是FLASH的站點，你就必定會看到切換到HTML5的好處。首先，搜索引擎的蜘蛛將可以抓取你的站點和索引你的內容。全部嵌入到動畫中的內容將所有能夠被搜索引擎讀取。在搜索引擎優化的基本理論中，這一方面將會驅動你的網站得到更多的右擊流量。html5

提供更多的功能，提升用戶的友好體驗java

使用HTML5的另外一個好處就是它能夠增長更多的功能。對於HTML5的功能性問題，咱們從全球幾個主流站點對它的青睞就能夠看出。社交網絡大亨Facebook已經推出他們期待已久的基於HTML5的iPad應用平臺，潘多拉也推出他們基於HTML5的音樂播放器的新版本。遊戲平臺Zynga也在推出了三款新的在移動設備瀏覽器上運行的基於HTML5的遊戲等等。天天都有不斷的基於HTML5的網站和HTML5特性的網站被推出。保持站點處於新技術的前沿，也能夠很好的提升用戶的友好體驗。android

可用性的提升，提升用戶的友好體驗ios

HTML5的推出給前端行業帶來了一片新的天空，不僅僅提供了大量的API，給移動端開發也是一個很大的福音。web

說了這麼多，扯了這麼多，那麼上面這些和移動端又有什麼關係。實質上是沒有關係的，在作移動端開發，因爲移動端對於HTML5的支持仍是很不錯的。推薦你們在作移動端開發的時候，儘可能使用HTML5新添加的那些語義化的標籤。面試

HTML5在特別老的手機上會有問題，由於手機是沒法識別這些新標籤的。因此咱們須要使用JavaScript的createElement方法，手動建立標籤，以解決兼容問題，不作多餘贅述，這不是本文的重點。數據庫

meta標籤

看到meta標籤，不由的讓我想起一次面試經歷，面試官當時問了我一個問題<head>裏面都有什麼？記得當時只是回答了都有哪些標籤，然而，面試官想要知道的不僅是簡簡單單的幾個標籤。meta一個熟悉既陌生的標籤。它到底能作什麼？

META標籤:一般所說的meta標籤，是在HTML網頁源代碼中一個重要的html標籤。META標籤用來描述一個HTML網頁文檔的屬性，例如做者、日期和時間、網頁描述、關鍵詞、頁面刷新等。

根據百度百科介紹，能夠作不少事情的ing，有的時候SEO也是依賴於meta標籤。元數據是用來歸納描述數據的一些基本數據。也就是描述數據的數據。

SEO

meta標籤共有兩個屬性，分別是http-equiv屬性和name屬性。meta標籤用來描述一個HTML網頁文檔的屬性，但倒是文檔的最基本的元數據

name

name屬性主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

meta標籤的name屬性語法格式是：<meta name="參數" content="具體的參數值" />。

其中name屬性主要有如下幾種參數:

名稱 做用 舉例
Keywords(關鍵字) keywords用來告訴搜索引擎你網頁的關鍵字 <meta name ="keywords" content="science,human">
description(網站內容描述) description用來告訴搜索引擎你的網站主要內容 <meta name="description" content="this's Aaron blog!">
author(做者) 標註網頁的做者 <meta name="author" content"root,wo_99936@qq.com">
generator(頁面生成器) 規定用於生成文檔的一個軟件包（不用於手寫頁面） <meta name="generator" content="FrontPage 4.0">
revised(頁面修改信息) 這經常使用於最後更改的網站 <meta name="revised" content="story,2015/07/22" />
copyright(版權信息) 版權信息 <meta name="copyright" content="All Rights Reserved" />

http-equiv

http-equiv顧名思義，至關於http協議中文件頭的做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。

名稱 做用 舉例
content-Type(顯示字符集的設定) 設定頁面使用的字符集 <meta http-equiv="content-Type" content="text/html; charset=gb2312"/>
Expires(期限) 能夠用於設定網頁的到期時間。一旦網頁過時，必須到服務器上從新傳輸，這裏必須使用GMT的時間格式 <meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT">
Pragma(cache模式) 禁止瀏覽器從本地計算機的緩存中訪問頁面內容 <meta http-equiv="Pragma" content="no-cache"/>
Refresh(刷新) 自動刷新並指向新頁面，其中的2是指停留2秒鐘後自動刷新到URL網址 <meta http-equiv="Refresh" content="2; URL=http://www.root.net&quot;/>
Set-Cookie(cookie設定) 設置cookie, 若是網頁過時，那麼存盤的cookie將被刪除 <meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT; path=/";/>
Window-target(顯示窗口的設定) 強制頁面在當前窗口以獨立頁面顯示,用來防止別人在框架裏調用本身的頁面 <meta http-equiv="Window-target" content="_top"/>

meta標籤的一個很重要的功能就是設置關鍵字，來幫助你的主頁被各大搜索引擎登陸，提升網站的訪問量。在這個功能中，最重要的就是對Keywords和description的設置。由於按照搜索引擎的工做原理,搜索引擎首先派出機器人自動檢索頁面中的keywords和decription，並將其加入到本身的數據庫，而後再根據關鍵詞的密度將網站排序。

移動端輔助參數

HTML5推出以後又給meta賦予了新的使命。meta能夠輔助對移動段適配提供一些參數，供瀏覽器使用。

//  標籤的 name 是：可視區域窗口
name = "viewport"
//  設置可視區內容的屬性
content
//  寬度等於設備的寬度；通常狀況下 width 能夠接受兩種參數(number||device-width)
//  因爲 number [任意數值]在某些移動設備的兼容性很差，因此通常都會使用 device-width。
width="device-width"
//  頁面初始比例，配合縮放最大最小使用(number)
initial-scale = 1.0  
//  最小縮放比例，通常會和初始比例保持一致
minimum-scale = 1.0
//  最大縮放比例
maximum-scale = 1.0

//  示例
<meta name="viewport"
      content="width=device-width,
               initial-scale=1,
               minimum-scale=1,
               maximum-scale=1,
               user-scalable=no" />

meta除了上述所說的之外還有一些其餘輔助功能。

//  去除iphone識別數字爲號碼
<meta name="format-detection" content="telephone=no">
//  不識別郵箱
<meta name="format-detection" content="email=no">
//  禁止跳轉至地圖
<meta name="format-detection" content="adress=no">
移動端設備像素比

說到像素比，那麼到底什麼是像素比呢？像素比是瀏覽器廠商出產時候對移動設備的設置，把一個像素放大至N個像素去顯示，這裏的N=像素比。咱們對像素比的屬性只能獲取，不能對其進行設置。

舉個栗子 ：
如今有個div，設置CSS屬性，假設當前設備獲取到的像素比爲：2 

<div id="box"></div>

<style type="text/css">
#box{
    width:100px;
    height:100px;
    background:red;  
}
</style>

那麼設備上顯示元素的時候，元素中的1px按照2倍像素比顯示，即1px按照2px來顯示，也就是說元素被放大成200px*200px來顯示。

你們知道，一張正常的圖片在photoShop中進行放大的時候會失真變的模糊。那麼在構建HTML頁面的時候，圖片會被放大到2倍的像素比來顯示，同理也會致使圖片會失真，爲了不在圖片在不一樣設備中顯示的時候避免圖片失真，在切圖過程當中圖片必定要在寬度大於750px的設計圖上選擇圖片。或者根據dpi來修改圖標的大小，使用@2x或者@3x倍圖。

@mixin bg-image($url) {
    background-image: url($url + "@2x.png");
}

對於圖標的處理可使用字體包的形式來處理。經過font-size來展現icon阿里圖標庫。對於字體包的應用這裏就不作太多贅述了。

移動端常見樣式問題

在進行web端開發的時候不少元素都會有一些默認的屬性，給開發帶來很大的困擾，然而到了移動端這些問題就沒了嗎？答案是NO，反之移動端帶來的問題遠遠比web端要多不少。

灰色陰影

開發的過程當中超連接，按鈕在按下的時候，在元素身上會出現灰色的陰影，閃爍一下。然而這樣會給用戶體驗帶來很差的影響，對於這個問題到底應該怎麼解決？

解決方案：

a,input,button{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}
按鈕 IOS 下默認樣式

在開發的過程當中按照設計圖給button編寫好css樣式，在PC端(移動端模擬器)進行測試的時候沒有任何異常，可是經過真機測試的時候就會發現本身寫的css樣式，被IOS的默認樣式給幹掉了，和本身想的徹底不同。

解決方案：

input[type="button"],
input[type="submit"],
input[type="reset"]{
    appearance: none;
    -webkit-appearance: none;
}

textarea{
    appearance: none;
    -webkit-appearance: none;
}
移動端默認字體

當咱們接到一個移動端項目的時候，psd文件到手，發現不少的UI設計師都喜歡使用微軟雅黑做爲中文字體進行設計，因而就絕不猶豫的在css默認樣式內寫入font-family:"微軟雅黑"，直至上線才發現字體根本就不是微軟雅黑字體，有些驚呆了有木有~~~

這裏說一下各類不一樣系統的默認字體：

ios 系統

  1. 默認中文字體是 Heiti SC
  2. 默認英文字體是 Helvetica
  3. 默認數字字體是 HelveticaNeue
  4. 無微軟雅黑字體

android 系統

  1. 默認中文字體是 Droidsansfallback
  2. 默認英文和數字字體是 Droid Sans
  3. 無微軟雅黑字體

winphone 系統

  1. 默認中文字體是 Dengxian （方正等線體）
  2. 默認英文和數字字體是 Segoe
  3. 無微軟雅黑字體

以上就是各個系統默認引用的字體包，這裏要和設計師說明。可是若是設計師非要堅持使用微軟雅黑字體怎麼辦，難道就沒有辦法了麼？答案是有的，Css3推出了加載本地字體包。可是不到玩不得以不推薦這樣作，由於一箇中文字體包實在是太大了。可能須要10+M對於整個網頁來講可能須要長時間的加載，有些得不償失了。

@font-face {
    font-family: 'lato';
    src: url(./font/Lato-Light.ttf);
}
@font-face {
    font-family: "webfontSourceHanSansSC";
    src: url(./font/SourceHanSansCN-Light.ttf);
}
文字縮放

在部分手機中橫豎屏切換的時候可能會致使字體大小縮放，用戶體驗很很差，使用以下css來禁止文字縮放問題。

*{
    -webkit-text-size-adjust:100%;
}
滾動回彈

overflow-scrolling屬性控制元素在移動設備上是否使用滾動回彈效果。auto使用普通滾動，當手指從觸摸屏上移開，滾動會當即中止。touch使用具備回彈效果的滾動，當手指從觸摸屏上移開，內容會繼續保持一段時間的滾動效果。繼續滾動的速度和持續的時間和滾動手勢的強烈程度成正比。

body{
    -webkit-overflow-scrolling:touch;
}

必定要設置該屬性，不然在IOS下會出現局部滾動不流暢的bug

自適應與響應式

很長一段時間對於自適應與響應式很模糊，傻傻分不清楚，都是爲了適配移動端，難道兩個不是同一個東西麼？二者之間到底有什麼區別呢？那麼若是想要搞明白這個問題，我想先須要瞭解一下自適應和響應式究竟是什麼，才能弄明白二者之間的區別。

爲了搞清楚這個問題，瘋狂Google因而找到了這張圖，這張圖能夠說是把自適應與響應式表現的淋漓盡致。

e1fe9925bc315c60e0ee106c8e63bd1748547714.jpeg?token=acfea84022dc2c991e9af48dbde44ab2&s=FEA83863A5A84D034AD56DD30000A0B1

圖片選自網絡，侵權必刪

響應式

響應式網頁設計：響應式網站設計是一種網絡頁面設計佈局，其理念是：集中建立頁面的圖片排版大小，能夠智能地根據用戶行爲以及使用的設備環境進行相對應的佈局。(百度百科)

我的理解：響應式是web端頁面對移動設備的兼容處理。其實現所有依賴於@media(媒體查詢)。其做用就是實時的監控設備狀況，完成不一樣的文件操做。@media能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設計響應式的頁面，@media是很是有用的。當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新對頁面進行渲染。

並非全部瀏覽器都能很好的支持@media，如下@media在各個瀏覽器中支持狀況。

瀏覽器支持

瀏覽器 版本
Chrome 21.0.0 版本以上
IE 9.0版本以上
Firefox 3.5.0版本以上
Safari 4.0.0版本以上
Opera 9.0.0版本以上

解決方案引入遠程cdn地址，對響應式進行兼容性處理。

<script src="//cdn.bootcss.com/html5media/1.1.8/html5media.min.js"></script>

媒體類型

設備類型形形色色，對於不一樣的設備該如何去選擇處理，@media不只僅針對於移動設備，下面是@media支持的參數。

  • all ：全部設備
  • braille ：盲文觸覺設備
  • embossed ：盲文打印機
  • print ：手持設備
  • projection ：打印預覽
  • screen ：彩屏設備
  • speech ："聽覺"相似的媒體類型
  • tty ：不適用像素的設備
  • tv ：電視設備
@media print {
    #box {background:green;}
}

這樣在手持設備上這個div背景顏色就會變成綠色，在其餘的設備上則還保持原有的粉色。So Easy有木有。然而並無這麼簡單，想要完成響應式的操做還有大量的工做要去作。

設備屏幕的大小形形色色，大小不一應該以什麼規格條件來完成適配呢？

適配條件：

  • PC端大屏 : 大於等於1200px
  • PC端中等屏 : 大於等於992px
  • 中等屏（平板） : 大於等於768px
  • 小屏（手機） : 小於768px

對於響應式總結起來也就是利用媒體查詢的特性，根據不一樣的屏幕的大小引入不一樣的css文件，以達到響應式的目的。

下面是我在使用響應式的時候總結的一些經驗：

  • 不要使用固定的寬高
  • 根據不一樣的屏幕引入不一樣的css文件
  • 多使用一些浮動佈局或彈性佈局
  • 儘可能不要使用定位
  • 圖片的處理，使圖片液態化
  • 字體大小不要使用px，使用em後者rem（二者區別前面章節有介紹）
自適應

自適應網頁設計：自適應網頁設計(AdaptiveWebDesign)指能使網頁自適應顯示在不一樣大小終端設備上新網頁設計方式及技術。

移動端的適配個說紛紜，如百分比適配，rem適配，vw適配然而這種狀況給開發人員帶來很頭疼的問題，到底應該怎麼適配才能響應不一樣的移動設備。其實，對於WebApp適配的解決方案有不少，在選擇上應該如何取捨，今天就這個問題咱們來進行簡單的闡明。

以下全部示例都是使用同一佈局：

<div id="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>    
</div>

百分比 || vw

由於全部的子元素都是的寬度百分比都是按照父級來定的，高度也是如此，若是把子元素寬度設置爲100%的，高度不是固定的時候，子元素寬度會鋪滿整個父元素，裏面的內容不統一的時候會出現良莠不齊的狀況。其中的原理就是，由於媒體查詢會實時對當前設備的可視窗口進行檢測，4 個div的寬度各佔父層25%，就此完成適配。

#box {
    width:100%;
}
#box:after {
    content:'';
    display:block;
    clear:both;
}
#box div {
    width:25%;
    min-height:80px;
    float:left;
    font-size:36px;
    line-height:80px;
    text-align:center;
    color:white;
}
#box div:nth-child(1){
    background:red;
}
#box div:nth-child(2){
    background:blue;
}
#box div:nth-child(3){
    background:green;
}
#box div:nth-child(4){
    background:hotpink;
}

使用vw也是如此，width:100vw=width:100%這個實在是有點無腦操做了，不在這裏浪費你們太多時間。

利用viewport適配

其實大多數的Web App在開發的時候，利用百分比佈局的比較少，也會帶來一些小的問題，這時就出現的利用viewport利用窗口的縮放來進行佈局。

咱們說過initial-scale(初始比例)，minimum-scale(最小縮放比例)，maximum-scale(最大縮放比例)，其實在移動在設置這個屬性的時候，並非把元素給放大了，而是把屏幕按照設置的比例對應的放大，給用戶一種錯覺，達到頁面的放大縮小目的。那麼該如何使用viewport進行適配呢？

改動CSS樣式:

#box {
    width:100%;
}
#box:after {
    content:'';
    display:block;
    clear:both;
}
#box div {
    width:80px;
    min-height:80px;
    float:left;
    font-size:36px;
    line-height:80px;
    text-align:center;
    color:white;
}
#box div:nth-child(1){
    background:red;
}
#box div:nth-child(2){
    background:blue;
}
#box div:nth-child(3){
    background:green;
}
#box div:nth-child(4){
    background:hotpink;
}

可是若是這樣設置的話就沒法適應全部的移動設備了，咱們應該怎麼去作才能讓他徹底的適配全部的移動設備呢？利用強大的JavaScript來解決這個問題，尚未JavaScript不能解決的問題。

(function() {
    //獲取到的是移動設備的deviceWidth，即設備屏幕寬度
    var _deviceWidth = window.screen.width;     
    // 但願經過 viewport 把全部頁面設置成一致
    _targetWidth = 320;    
    //獲得初始和最大最小縮放比例
    _scale = (_deviceWidth / _targetWidth);
    //建立一個meta標籤
    oMeta = document.createElement('meta');     
    oMeta.name = 'viewport';     //可視區域窗口
    //把縮放比例賦值給初始化縮放比例最大最小縮放比例
    oMeta.content = 'user-scalable=no,initial-scale=' + _scale +
                    ',minimum-scale=' + _scale +
                    ',maximum-scale=' + _scale;
    document.head.appendChild(oMeta);     //把meta標籤添加到head裏面
})();

經過JavaScript把全部的目標屏幕寬度設置成同樣的，計算出當前的屏幕寬度與咱們所須要設定的屏幕寬度的比例，達到設備的適配。經過viewport進行適配，會出現先前提到的問題，就是在圖片選取上要注意，圖片太小會致使圖的失真。

有一點須要注意，這種適配方法，在QQ內置瀏覽器中佈局會錯亂，出現很大的適配問題，若是不考慮QQ內置瀏覽器的話能夠考慮使用這種方案，可是不太推薦。

利用 rem 適配

然而最多見的適配方法也就是使用rem來進行適配，不少小夥伴可能對於em和rem有些混淆，傻傻的分不清楚。

  • em：是根據父節點的字體大小進行計算的單位。
  • rem： r 表明根（HTML），知道r表明HTML後就能夠明確的知道rem是經過HTML的字體大小進行計算的單位。
(function() {
    //  獲取到HTML
    var oHtml = document.documentElement;   
    //  獲取到移動設備的html的外圍寬度，若是給HTML設置寬度會印象結果
    _hWidth = oHtml.getBoundingClientRect().width;    
    //  獲取到移動設備的視口的寬度，推薦使用
    _Width = oHtml.clientWidth;      
    //  這裏的16是擬定值，能夠隨意設置，最好能與你測試的設備寬度能整除，方便計算
    oHtml.style.fontSize = _Width / 16 + 'px';     
})();

改動css

#box {
    width:100%;
}
#box:after {
    content:''; 
    display:block;
    clear:both;
}
#box div {
    width:4rem;
    height:4rem;
    float:left;
    font-size:36px;
    line-height:4rem;
    text-align:center;
    color:white;
}
#box div:nth-child(1){
    background:red;
}
#box div:nth-child(2){
    background:blue;
}
#box div:nth-child(3){
    background:green;
}
#box div:nth-child(4){
    background:hotpink;
}

既然已經知道二者的區別，那麼在實際開發過程當中應該如何使用rem完成適配，上面的css代碼中，rem又是怎麼計算得出來的呢？

公式：元素所需設置的rem值=設計圖測量的值/(屏幕的寬度/N)，這裏的N就是在JavaScript計算的時候除以的那個16。其原理是把屏幕平均分紅了N份，並把一份的值賦值給了rem，也就是html根元素的字體大小。

我也去看了一下如某寶、某東的適配方案，他們一樣使用的是rem進行適配的，可是與他們在rem賦值的作了判斷，當屏幕大於750px就將屏幕寬度鎖死，固定在750px使rem成爲一個固定的值。這樣當屏幕過大的時候，頁面內容不會變的特別大。

(function() {
    //  獲取到HTML
    var oHtml = document.documentElement;   
    //  獲取到移動設備的html的外圍寬度，若是給HTML設置寬度會印象結果
    _hWidth = oHtml.getBoundingClientRect().width;    
    //  獲取到移動設備的視口的寬度，推薦使用
    _Width = oHtml.clientWidth;      
    _Width = _Width>=750?750:_Width;
    //  這裏的16是擬定值，能夠隨意設置，最好能與你測試的設備寬度能整除，方便計算
    oHtml.style.fontSize = _Width / 16 + 'px';     
})();

不少大廠都是採用的rem的這種適配方案，你們能夠自行Google一下，大廠是如何處理的。理論上是差很少的，可能就是在用法以及對於rem計算的處理有些不一樣而已。無論如何處理只要懂得這個道理就行了。

移動端事件

隨着設備的不一樣所要應用的事件也就會有所不一樣，然而在移動的應用onclick的時候是能夠兼容的，會存在一些小問題，因此針對移動端，推出了移動端專用的事件，那麼今天就具體和你們說一下，移動端的事件的一些問題，以及在解決這些問題的時候引起出的另外一些問題。

如今會想起最初作移動端的時候，是使用onclick事件去完成一些操做，雖然移動端可以完成onclick的一些操做，仍是會存在一些問題。

Click事件在移動端開發中會有300ms的延遲，由於在移動端早期，瀏覽器系統有放大縮小功能，用戶在屏幕上點擊兩次之後，系統會觸發放大或者縮小的功能，所以系統作了一個處理，當觸摸一次後，在300ms之後有沒有進行二次觸摸，若是存在二次觸摸，說明就觸發了放大或縮小功能，不然的話只是單單執行click事件。所以當click時候，全部用戶必須等300ms後纔會觸發click事件。因此當在移動端使用click事件的時候，會感受有300ms的延遲。

移動端主要分爲三個比較重要的事件，也是常常用的事件：

touchStart ：手指按下
touchMove ：手指移動
touchEnd ：手指離開

移動端事件對象

移動端的事件對象與web端中的事件對象有些不太同樣，web端咱們在對頁面進行操做的時候大多數都是依賴於鼠標，可是移動端是依賴於屏幕的，經過手指的觸摸屏幕，給用戶反饋，鼠標只能有一個，可是手機卻又不少(●'◡'●)

移動端的事件對象存在於事件函數中：
例子：

var oDiv = document.getElementById('div');
oDiv.addEventListener('touchstart',function(ev){
    console.log(ev)
})

事件對象屬性：

屬性 說名
touches 當前位於屏幕上的全部手指的一個列表
targetTouches 位於當前DOM元素上的一個手指的一個列表
changedTouches 涉及當前事件的手指的一個列表

你們能夠經過上面的代碼輸出一下ev（事件對象），在控制檯查看一下移動端都包含哪些東西。

除了上述事件，有個特殊事件再說一下orientationChange這個事件是蘋果公司爲safari中添加的。以便開發人員可以肯定用戶什麼時候將設備由橫向查看切換爲縱向查看模式。在設備旋轉的時候，會觸發這個事件。

window.addEventListener("orientationchange", () => {
    alert(window.orientation);
}, false);

orientation media query在ios3.2+和安卓2.0+上還有其餘瀏覽器上有效。有些設備並無提供orientationchange事件，但不觸發窗口的resize事件。而且media queries也不支持的狀況下，咱們該怎麼辦呢？能夠用resize事件來判斷。用innerWidth，innerHeight，能夠檢索獲得屏幕大小。依據寬和高的大小比較判斷，寬小於高爲豎屏，寬大與高就是橫屏。就如今的移動端發展而言已經又大多數移動設備已經支持這個事件了。

移動端開發注意事項

在移動端開發的過程當中，瀏覽器的模擬器有時可能會不支持on的方法綁定事件，因此通常要用事件綁定的方式給元素綁定事件。

var oDiv = document.getElementById('div');
oDiv.addEventListener('touchstart',(ev) => {
    console.log(ev)
})

移動端開發有一個很大的坑，層級爲了這個坑也是翻山越嶺。這個大坑就是事件點透，最初看到這個名詞的時候也是一臉的懵逼，不知道怎麼回事。

什麼是事件點透？當上層元素髮生點擊的時候，下層元素也有點擊特性，在大約300ms後，若是上層元素消失或者隱藏，目標點會「漂移」到下層元素身上，觸發點擊事件。

解決方法：

  1. 下層不要使用有點擊（焦點）特性的元素。
  2. 阻止document的默認行爲
總結

寫了好多東西，只是我的的一些對於移動端開發的一些總結，可能寫的有些亂，很感謝你們可以花費這麼長時間來閱讀這篇文章。文章中哪裏有錯誤的話，你們能夠在下面給我留言，我會盡快作出改正。

若是你和我同樣喜歡前端的話，能夠加Qq羣：135170291，期待你們的加入。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程