2. 程式人生 > 實用技巧 >移動Web深度剖析

移動Web深度剖析

阿新 • • 發佈：2020-12-09

隨著前端技術的急速發展，隨著網際網路行業的日益發展，html5作為一種比較新型的開發技術早已經被很多大的企業所應用，通過html5語言可以開發適用於任何裝置上的酷炫網站頁面，所以HTML5的發展趨勢可想而知。話說HTML5退出了也好長一段時間了，現在還拿出來炒冷飯O(∩_∩)O哈哈~

HTML5與seo

為了更好地處理今天的網際網路應用，HTML5添加了很多新元素及功能，比如：圖形的繪製，多媒體內容，更好的頁面結構，更好的形式處理，和幾個Api拖放元素，定位，包括網頁 應用程式快取，儲存，網路工作者。HTML5推出一個很重要的概念就是語義化標籤。這一概念給網頁的seo帶來了很大的幫助。

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

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

提供更多的功能，提高使用者的友好體驗

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

可用性的提高，提高使用者的友好體驗

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

說了這麼多，扯了這麼多，那麼上面這些和移動端又有什麼關係。實質上是沒有關係的，在做移動端開發，由於移動端對於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,[email protected]">
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於是找到了這張圖，這張圖可以說是把自適應與響應式表現的淋漓盡致。

響應式

響應式網頁設計：響應式網站設計是一種網路頁面設計佈局，其理念是：集中建立頁面的圖片排版大小，可以智慧地根據使用者行為以及使用的裝置環境進行相對應的佈局。(百度百科)

個人理解：響應式是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地址，對響應式進行相容性處理。

<scriptsrc="//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計算的處理有些不同而已。不管如何處理只要懂得這個道理就好了。

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

移動端事件

隨著裝置的不同所要應用的事件也就會有所不同，然而在移動的應用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的預設行為

相關推薦

移動Web深度剖析

隨著前端技術的急速發展，隨著網際網路行業的日益發展，html5作為一種比較新型的開發技術早已經被很多大的企業所應用，通過html5語言可以開發適用於任何裝置上的酷炫網站頁面，所以HTML5的發展趨勢可想而知。話說HTM

基於統計的預警：同環比預警實現深度剖析

摘要：UAV.Monitor提供了對全維監控指標的預警功能，各型別的監控指標均可配置預警策略，當預警策略被觸發後，可通過郵件、HTTP呼叫等方式進行通知報警，並會根據預警時間頻率等對報警動作進行壓制。

移動web效能優化從入門到進階

關於前端效能優化相關的技術知識，網上隨便搜一些就有很多，本文將系統性的從初級到高階的思路，總結移動前端效能優化各個方面的相關技術點，內容來自筆者以往經驗的總結，希望讀者可以花些時間看看。

深度剖析分散式單點登入框架XXL-SSO

於2018年初，在github上建立XXL-SSO專案倉庫並提交第一個commit，隨之進行系統結構設計，UI選型，互動設計……

ThreadLocal原始碼深度剖析

ThreadLocal原始碼深度剖析 ThreadLocal的作用 ThreadLocal的作用是提供執行緒內的區域性變數，說白了，就是在各執行緒內部建立一個變數的副本，相比於使用各種鎖機制訪問變數，ThreadLocal的思想就是用空間換時間，

Spring配置類深度剖析-總結篇(手繪流程圖，可白嫖)

生命太短暫，不要去做一些根本沒有人想要的東西。本文已被 https://www.yourbatman.cn 收錄，裡面一併有Spring技術棧、MyBatis、JVM、中介軟體等小而美的專欄供以免費學習。關注公眾號【BAT的烏託邦】逐個擊破，深入

移動WEB開發的rem佈局、Less使用

移動WEB開發的rem佈局 目標（目錄） 能夠使用rem單位 能夠使用媒體查詢的基本語法

移動web開發之視口viewport_淺談移動端中的視口

在 PC 端，視口指的是瀏覽器的可視區域，其寬度和瀏覽器視窗的寬度保持一致。在css標準文件中，視口也被稱為初始包含塊，它是所有css百分比寬度推算的根源，給css佈局限制了一個最大寬度。

移動web問題小結

本文主要收集一些移動web開發中常見的問題和解決辦法，在日常的工作中遇到新的問題會不定時更新到文章中。

移動web開發之rem適配佈局

移動web開發之rem適配佈局 方案： 頁面佈局文字能否隨著螢幕大小變化而變化 流式佈局和flex佈局主要針對於寬度佈局，那高度如何佈局？

前端面試題全面整理-帶解析 涵蓋CSS、JS、瀏覽器、Vue、React、移動web、前端效能、演算法、Node

前端面試題全面整理-帶解析 涵蓋CSS、JS、瀏覽器、Vue、React、移動web、前端效能、演算法、Node

移動web開發流式佈局

二倍圖 ####3.1物理畫素&物理畫素比 物理畫素點指的是螢幕顯示的最小顆粒，是物理真實存在的。這是廠商在出廠時就設定好了,比如蘋果6 是 750* 1334

快取與資料庫一致性問題深度剖析

前言 本篇文章是我之前系列文章中的一篇，主要討論了我們在平時的開發過程中，各大系統中都要用到的快取資料的問題，進一步延伸到資料庫和快取的雙寫一致性問題，並且給出了所有方案的實現程式碼方便大家參考。

移動web基礎

1.pixel px：邏輯畫素，1px在不同裝置上的實際大小不一樣 dp，pt：物理畫素，1pt在不同裝置上的實際大小一樣

深度剖析！註解及反射的使用的底層原理，看完沒有不懂的！

前言 註解（Annotation）又稱 Java 標註，是 JDK5.0 引入的一種註釋機制。Java 語言中的類、方法、變數、引數和包等都可以被標註，和 Javadoc（也就是所說的文件註釋） 不同，Java 標註可以通過反射獲取標註內容。

面試老被問LinkedList原始碼？看看阿里技術官是怎麼深度剖析的吧！

前言 LinkedList底層是基於雙向連結串列，連結串列在記憶體中不是連續的，而是通過引用來關聯所有的元素，所以連結串列的優點在於新增和刪除元素比較快，因為只是移動指標，並且不需要判斷是否需要擴容，缺點是查詢和

移動WEB開發-響應式佈局

1響應式開發原理 1.1 響應式開發原理 就是使用媒體查詢針對不同寬度的裝置進行佈局和樣式的設定，從而適配不同裝置的目的。

深度剖析 Kafka Producer 的緩衝池機制【圖解 + 原始碼分析】

上次跟大家分享的文章「Kafka Producer 非同步傳送訊息居然也會阻塞？」中提到了緩衝池，後面再經過一番閱讀原始碼後，發現了這個緩衝池設計的很棒，被它的設計思想優雅到了，所以忍不住跟大家繼續分享一波。

28. Python記憶體管理與垃圾回收(第一部分)：深度剖析Python記憶體管理架構、記憶體池的實現原理

楔子 記憶體管理，對於Python這樣的動態語言來說是非常重要的一部分，它在很大程度上決定了Python的執行效率，因為Python在執行中會建立和銷燬大量的物件，這些都涉及記憶體的管理，因此精湛的記憶體管理技術是確保記

移動web優先使用核心_通過移動優先方法充分利用Web應用程式的動機，從而擺脫了...

移動web優先使用核心 Recent media consumption & trends reveal that 90% of their mobile time is spent in apps, and only 10% browsing the rest of the internet. But the user base of a sp