摘要：游戲平臺也在推出了三款新的在移動(dòng)設(shè)備瀏覽器上運(yùn)行的基于的游戲等等。實(shí)質(zhì)上是沒有關(guān)系的，在做移動(dòng)端開發(fā)，由于移動(dòng)端對于的支持還是很不錯(cuò)的。移動(dòng)端輔助參數(shù)推出之后又給賦予了新的使命。使用普通滾動(dòng)，當(dāng)手指從觸摸屏上移開，滾動(dòng)會(huì)立即停止。

隨著前端技術(shù)的急速發(fā)展，隨著互聯(lián)網(wǎng)行業(yè)的日益發(fā)展，HTML5作為一種比較新型的開發(fā)技術(shù)早已經(jīng)被很多大的企業(yè)所應(yīng)用，通過HTML5語言可以開發(fā)適用于任何設(shè)備上的酷炫網(wǎng)站頁面，所以HTML5的發(fā)展趨勢可想而知。話說HTML5推出了也好長一段時(shí)間了，現(xiàn)在還拿出來炒冷飯O(∩_∩)O哈哈~

HTML5與SEO

為了更好地處理今天的互聯(lián)網(wǎng)應(yīng)用，HTML5添加了很多新元素及功能，比如：圖形的繪制，多媒體內(nèi)容，更好的頁面結(jié)構(gòu)，更好的形式處理，和幾個(gè)Api拖放元素，定位，包括網(wǎng)頁 應(yīng)用程序緩存，存儲，網(wǎng)絡(luò)工作者。HTML5推出一個(gè)很重要的概念就是語義化標(biāo)簽。這一概念給網(wǎng)頁的SEO帶來了很大的幫助。

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

對于一些網(wǎng)站，特別是那些嚴(yán)重依賴于FLASH的網(wǎng)站HTML5是一個(gè)大福音。如果你有一個(gè)都是FLASH的站點(diǎn)，你就一定會(huì)看到切換到HTML5的好處。首先，搜索引擎的蜘蛛將能夠抓取你的站點(diǎn)和索引你的內(nèi)容。所有嵌入到動(dòng)畫中的內(nèi)容將全部可以被搜索引擎讀取。在搜索引擎優(yōu)化的基本理論中，這一方面將會(huì)驅(qū)動(dòng)你的網(wǎng)站獲得更多的右擊流量。

提供更多的功能，提高用戶的友好體驗(yàn)

使用HTML5的另一個(gè)好處就是它可以增加更多的功能。對于HTML5的功能性問題，我們從全球幾個(gè)主流站點(diǎn)對它的青睞就可以看出。社交網(wǎng)絡(luò)大亨Facebook已經(jīng)推出他們期待已久的基于HTML5的iPad應(yīng)用平臺，潘多拉也推出他們基于HTML5的音樂播放器的新版本。游戲平臺Zynga也在推出了三款新的在移動(dòng)設(shè)備瀏覽器上運(yùn)行的基于HTML5的游戲等等。每天都有不斷的基于HTML5的網(wǎng)站和HTML5特性的網(wǎng)站被推出。保持站點(diǎn)處于新技術(shù)的前沿，也可以很好的提高用戶的友好體驗(yàn)。

可用性的提高，提高用戶的友好體驗(yàn)

HTML5的推出給前端行業(yè)帶來了一片新的天空，不單單提供了大量的API，給移動(dòng)端開發(fā)也是一個(gè)很大的福音。

說了這么多，扯了這么多，那么上面這些和移動(dòng)端又有什么關(guān)系。實(shí)質(zhì)上是沒有關(guān)系的，在做移動(dòng)端開發(fā)，由于移動(dòng)端對于HTML5的支持還是很不錯(cuò)的。推薦大家在做移動(dòng)端開發(fā)的時(shí)候，盡量使用HTML5新添加的那些語義化的標(biāo)簽。

HTML5在特別老的手機(jī)上會(huì)有問題，因?yàn)槭謾C(jī)是無法識別這些新標(biāo)簽的。所以我們需要使用JavaScript的createElement方法，手動(dòng)創(chuàng)建標(biāo)簽，以解決兼容問題，不做多余贅述，這不是本文的重點(diǎn)。

meta標(biāo)簽

看到meta標(biāo)簽，不禁的讓我想起一次面試經(jīng)歷，面試官當(dāng)時(shí)問了我一個(gè)問題里面都有什么？記得當(dāng)時(shí)只是回答了都有哪些標(biāo)簽，然而，面試官想要知道的不只是簡簡單單的幾個(gè)標(biāo)簽。meta一個(gè)熟悉既陌生的標(biāo)簽。它到底能做什么？

META標(biāo)簽:通常所說的meta標(biāo)簽，是在HTML網(wǎng)頁源代碼中一個(gè)重要的html標(biāo)簽。META標(biāo)簽用來描述一個(gè)HTML網(wǎng)頁文檔的屬性，例如作者、日期和時(shí)間、網(wǎng)頁描述、關(guān)鍵詞、頁面刷新等。

根據(jù)百度百科介紹，可以做很多事情的ing，有的時(shí)候SEO也是依賴于meta標(biāo)簽。元數(shù)據(jù)是用來概括描述數(shù)據(jù)的一些基本數(shù)據(jù)。也就是描述數(shù)據(jù)的數(shù)據(jù)。

SEO

meta標(biāo)簽共有兩個(gè)屬性，分別是http-equiv屬性和name屬性。meta標(biāo)簽用來描述一個(gè)HTML網(wǎng)頁文檔的屬性，但卻是文檔的最基本的元數(shù)據(jù)

name

name屬性主要用于描述網(wǎng)頁，與之對應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。

meta標(biāo)簽的name屬性語法格式是：。

其中name屬性主要有以下幾種參數(shù):

http-equiv

http-equiv顧名思義，相當(dāng)于http協(xié)議中文件頭的作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，與之對應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。

meta��(biāo)簽的一��(gè)很重要的功能就是��(shè)置關(guān)鍵字，來幫助你的主頁被各大搜索引擎登錄，提高��(wǎng)站的訪問��。在這��(gè)功能��，最重要的就是對Keywords��description的設(shè)��。因?yàn)榘凑账阉饕娴墓ぷ髟��?搜索引擎首先派出��(jī)器人自動(dòng)檢索頁面中的keywords��decription，并將其加入到自己的��(shù)��(jù)庫，然后再根��(jù)��(guān)鍵詞的密度將��(wǎng)站排����

移動(dòng)端輔助參��(shù)

HTML5推出之后又給meta賦予了新的使命��meta可以輔助對移��(dòng)段適配提供一些參��(shù)，供瀏覽器使����

//  ��(biāo)簽的 name 是：可視區(qū)域窗��
name = "viewport"
//  ��(shè)置可視區(qū)��(nèi)容的屬��
content
//  寬度等于��(shè)備的寬度；一般情況下 width 可以接受兩種參數(shù)(number||device-width)
//  由于 number [任意��(shù)值]在某些移��(dòng)��(shè)備的兼容性不好，所以一般都��(huì)使用 device-width��
width="device-width"
//  頁面初始比例，配合縮放最大最小使��(number)
initial-scale = 1.0  
//  最小縮放比��，一般會(huì)和初始比例保持一��
minimum-scale = 1.0
//  最大縮放比��
maximum-scale = 1.0

//  示例

meta除了上述所說的以外還有一些其他輔助功����

//  去除iphone識別��(shù)字為號碼

//  不識別郵��

//  禁止跳轉(zhuǎn)至地��

移動(dòng)端設(shè)備像素比

說到像素��，那么到底什么是像素比呢？像素比是瀏覽器廠商出��(chǎn)��(shí)��?qū)σ��?dòng)��(shè)備的��(shè)��，把一��(gè)像素放大至N��(gè)像素去顯��，這里的N=像素比。我們對像素比的屬性只能獲��，不能對其��(jìn)行設(shè)����

舉��(gè)栗子 ��
��(xiàn)在有��(gè)div，設(shè)��CSS屬��，假��(shè)��(dāng)前設(shè)備獲取到的像素比為：2

那么��(shè)備上顯示元素的時(shí)候，元素中的1px按照2倍像素比顯示，即1px按照2px來顯��，也就是說元素被放大��200px*200px來顯示��

大家知道，一張正常的圖片��photoShop中��(jìn)行放大的��(shí)候會(huì)失真變的模糊。那么在��(gòu)��HTML頁面的時(shí)��，圖片會(huì)被放大到2倍的像素比來顯示，同理也��(huì)��(dǎo)致圖片會(huì)失真，為了避免在圖片在不同設(shè)備中顯示的時(shí)候避免圖片失��，在切圖過程中圖片一定要在寬度大��750px的設(shè)��(jì)圖上選擇圖片?；蛘吒鶕?jù)dpi來修改圖��(biāo)的大小，使用@2x或��@3x倍圖��

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

對于圖標(biāo)的處理可以使用字體包的形式來處理。通過font-size來展��icon阿里圖標(biāo)��。對于字體包的應(yīng)用這里就不做太多贅述了��

移動(dòng)端常見樣式問��

在��(jìn)��web端開��(fā)的時(shí)候很多元素都��(huì)有一些默��(rèn)的屬��，給開發(fā)帶來很大的困��，然而到了移��(dòng)端這些問題就沒了嗎？答案是NO，反之移��(dòng)端帶來的問題��(yuǎn)��(yuǎn)��web端要多很多��

灰色陰影

開發(fā)的過程中超鏈��，按鈕在按下的時(shí)��，在元素身上��(huì)出現(xiàn)灰色的陰影，閃爍一��。然而這樣��(huì)給用戶體��(yàn)帶來不好的影響，對于這��(gè)問題到底��(yīng)該怎么解決��

解決方案��

a,input,button{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

按鈕 IOS 下默��(rèn)樣式

在開��(fā)的過程中按照��(shè)��(jì)圖給button編寫��css樣式，在PC��(移動(dòng)端模擬器)��(jìn)行測試的��(shí)候沒有任何異��，但是通過真機(jī)測試的時(shí)候就��(huì)��(fā)��(xiàn)自己寫的css樣式，被IOS的默��(rèn)樣式給干掉了，和自己想的完全不一����

解決方案��

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

textarea{
    appearance: none;
    -webkit-appearance: none;
}

移動(dòng)端默��(rèn)字體

��(dāng)我們接到一��(gè)移動(dòng)端項(xiàng)目的��(shí)����psd文件到手，發(fā)��(xiàn)很多��UI��(shè)��(jì)��都喜歡使��微軟雅黑作為中文字體��(jìn)行設(shè)��(jì)，于是就毫不猶豫的在css默認(rèn)樣式��(nèi)寫入font-family:"微軟雅黑"，直至上線才��(fā)��(xiàn)字體根本就不是微軟雅黑字��，有些驚呆了有木有~~~

這里說一下各種不同系��(tǒng)的默��(rèn)字體��

ios 系統(tǒng)

默認(rèn)中文字體�� Heiti SC

默認(rèn)英文字體�� Helvetica

默認(rèn)��(shù)字字體是 HelveticaNeue

無微軟雅黑字��

android 系統(tǒng)

默認(rèn)中文字體�� Droidsansfallback

默認(rèn)英文和數(shù)字字體是 Droid Sans

無微軟雅黑字��

winphone 系統(tǒng)

默認(rèn)中文字體�� Dengxian （方正等線體��

默認(rèn)英文和數(shù)字字體是 Segoe

無微軟雅黑字��

以上就是各��(gè)系統(tǒng)默認(rèn)引用的字體包，這里要和��(shè)��(jì)師說��。但是如果設(shè)��(jì)師非要堅(jiān)持使��微軟雅黑字體怎么��，難道就沒有辦法了么？答案是有的��Css3推出了加載本地字體包。但是不到玩不得以不推薦這樣��，因?yàn)橐粋��(gè)中文字體包實(shí)在是太大��?？赡苄枰?b>10+M對于整��(gè)��(wǎng)頁來說可能需要長��(shí)間的加載，有些得不償失了��

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

文字縮放

在部分手��(jī)中橫豎屏切換的時(shí)候可能會(huì)��(dǎo)致字體大小縮��，用戶體��(yàn)很不好，使用如下css來禁止文字縮放問����

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

滾動(dòng)回彈

overflow-scrolling屬性控制元素在移動(dòng)��(shè)備上是否使用滾動(dòng)回彈效果��auto使用普通滾��(dòng)，當(dāng)手指從觸摸屏上移��，滾��(dòng)��(huì)立即停止��touch使用具有回彈效果的滾��(dòng)，當(dāng)手指從觸摸屏上移開，��(nèi)容會(huì)繼續(xù)保持一段時(shí)間的滾動(dòng)效果。繼��(xù)滾動(dòng)的速度和持��(xù)的時(shí)間和滾動(dòng)手勢的強(qiáng)烈程度成正比��

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

一定要��(shè)置該屬��，否則在IOS下會(huì)出現(xiàn)局部滾��(dòng)不流暢的bug

自適��(yīng)與響��(yīng)��

很長一段時(shí)間對于自適應(yīng)與響��(yīng)式很模糊，傻傻分不清��，都是為了適配移��(dòng)端，難道兩��(gè)不是同一��(gè)東西��？兩者之間到底有什么區(qū)別呢？那么如果想要搞明白這��(gè)問題，我想先需要了解一下自適應(yīng)和響��(yīng)式到底是什么，才能弄明白兩者之間的區(qū)����

為了搞清楚這��(gè)問題，瘋��Google于是找到了這張��，這張圖可以說是把自適��(yīng)與響��(yīng)式表��(xiàn)的淋漓盡����

圖片選自��(wǎng)��(luò)，侵��(quán)必刪

響應(yīng)��

響應(yīng)式網(wǎng)頁設(shè)��(jì)：響��(yīng)式網(wǎng)站設(shè)��(jì)是一種網(wǎng)��(luò)頁面��(shè)��(jì)布局，其理念是：集中��(chuàng)建頁面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境��(jìn)行相對應(yīng)的布局��(百度百科)

��(gè)人理解：響應(yīng)式是web端頁面對移動(dòng)��(shè)備的兼容處理。其��(shí)��(xiàn)全部依賴��@media(媒體查詢)。其作用就是��(shí)��(shí)的監(jiān)控設(shè)備情��，完成不同的文件操作��@media可以針對不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)��(jì)響應(yīng)式的頁面��@media是非常有用的。當(dāng)你重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新對頁面��(jìn)行渲����

并不是所有瀏覽器都能很好的支持@media，以��@media在各��(gè)瀏覽器中支持情況��

瀏覽器支��

解決方案引入��(yuǎn)��cdn地址，對響應(yīng)式��(jìn)行兼容性處����

媒體類型

��(shè)備類型形形色色，對于不同的設(shè)備該如何去選擇處����@media不僅僅針對于移動(dòng)��(shè)��，下面是@media支持的參��(shù)��

all ：所有設(shè)��

braille ：盲文觸覺設(shè)��

embossed ：盲文打印機(jī)

print ：手持設(shè)��

projection ：打印預(yù)��

screen ：彩屏設(shè)��

speech ��"聽覺"類似的媒體類��

tty ：不適用像素的設(shè)��

tv ：電視設(shè)��

@media print {
    #box {background:green;}
}

這樣在手持設(shè)備上這��(gè)div背景顏色就會(huì)變成綠色，在其他的設(shè)備上則還保持原有的粉��。So Easy有木��。然而并沒有這么簡單，想要完成響��(yīng)式的操作還有大量的工作要去做��

��(shè)備屏幕的大小形形色色，大小不一��(yīng)該以什么規(guī)格條件來完成適配����

適配條件��

PC端大�� : 大于等于1200px

PC端中等屏 : 大于等于992px

中等屏（平板�� : 大于等于768px

小屏（手��(jī)�� : 小于768px

對于響應(yīng)式總��(jié)起來也就是利用媒體查詢的特��，根��(jù)不同的屏幕的大小引入不同的css文件，以��(dá)到響��(yīng)式的目的��

下面是我在使用響��(yīng)式的��(shí)候總��(jié)的一些經(jīng)��(yàn)��

不要使用固定的寬��

根據(jù)不同的屏幕引入不同的css文件

多使用一些浮��(dòng)布局或彈性布局

盡量不要使用定位

圖片的處��，使圖片液態(tài)��

字體大小不要使用px，使用em后者rem（兩者區(qū)別前面章節(jié)有介紹）

自適��(yīng)

自適��(yīng)��(wǎng)頁設(shè)��(jì)：自適應(yīng)��(wǎng)頁設(shè)��(jì)(AdaptiveWebDesign)指能使網(wǎng)頁自適應(yīng)顯示在不同大小終端設(shè)備上新網(wǎng)頁設(shè)��(jì)方式及技��(shù)��

移動(dòng)端的適配��(gè)說紛��，如百分比適����rem適配��vw適配然而這種情況給開��(fā)人員帶來很頭疼的問題，到底應(yīng)該怎么適配才能響應(yīng)不同的移��(dòng)��(shè)��。其��(shí)，對��WebApp適配的解決方案有很多，在選擇上應(yīng)該如何取��，今天就這��(gè)問題我們來��(jìn)行簡單的闡明��

如下所有示例都是使用同一布局��

    
1
    
2
    
3
    
4
    

百分�� || vw

��?yàn)樗械淖釉囟际堑膶挾劝俜直榷际前凑崭讣墎矶��?，高度也是如此，如果把子元素寬度��(shè)置為100%��，高度不是固定的��(shí)��，子元素寬度��(huì)鋪滿整��(gè)父元素，里面的內(nèi)容不��(tǒng)一的時(shí)候會(huì)出現(xiàn)參差不齊的情��。其中的原理就是，因?yàn)槊襟w查詢��(huì)��(shí)��(shí)對當(dāng)前設(shè)備的可視窗口��(jìn)行檢����4 ��(gè)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%這��(gè)��(shí)在是有點(diǎn)無腦操作��，不在這里浪費(fèi)大家太多��(shí)間��

利用viewport適配

其實(shí)大多��(shù)��Web App在開��(fā)的時(shí)��，利用百分比布局的比較少，也��(huì)帶來一些小的問��，這時(shí)就出��(xiàn)的利��viewport利用窗口的縮放來��(jìn)行布局��

我們說��initial-scale(初始比例)��minimum-scale(最小縮放比��)��maximum-scale(最大縮放比��)，其��(shí)在移��(dòng)在設(shè)置這��(gè)屬性的��(shí)��，并不是把元素給放大��，而是把屏幕按照設(shè)置的比例對應(yīng)的放��，給用戶一種錯(cuò)覺，��(dá)到頁面的放大縮小目的。那么該如何使用viewport��(jìn)行適配呢��

改動(dòng)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;
}

但是如果這樣��(shè)置的話就無法適應(yīng)所有的移動(dòng)��(shè)備了，我們應(yīng)該怎么去做才能讓他完全的適配所有的移動(dòng)��(shè)備呢？利用強(qiáng)大的JavaScript來解決這��(gè)問題，還沒有JavaScript不能解決的問����

(function() {
    //獲取到的是移��(dòng)��(shè)備的deviceWidth，即��(shè)備屏幕寬��
    var _deviceWidth = window.screen.width;     
    // 希望通過 viewport 把所有頁面設(shè)置成一��
    _targetWidth = 320;    
    //得到初始和最大最小縮放比��
    _scale = (_deviceWidth / _targetWidth);
    //��(chuàng)建一��(gè)meta��(biāo)��
    oMeta = document.createElement("meta");     
    oMeta.name = "viewport";     //可視區(qū)域窗��
    //把縮放比例賦值給初始化縮放比例最大最小縮放比��
    oMeta.content = "user-scalable=no,initial-scale=" + _scale +
                    ",minimum-scale=" + _scale +
                    ",maximum-scale=" + _scale;
    document.head.appendChild(oMeta);     //把meta��(biāo)簽添加到head里面
})();

通過JavaScript把所有的目標(biāo)屏幕寬度��(shè)置成一樣的，計(jì)算出��(dāng)前的屏幕寬度與我們所需要設(shè)定的屏幕寬度的比��，達(dá)到設(shè)備的適配。通過viewport��(jìn)行適��，會(huì)出現(xiàn)先前提到的問題，就是在圖片選取上要注��，圖片過小會(huì)��(dǎo)致圖的失����

有一��(diǎn)需要注意，這種適配方法，在QQ��(nèi)置瀏覽器中布局��(huì)��(cuò)亂，出現(xiàn)很大的適配問��，如果不考慮QQ��(nèi)置瀏覽器的話可以考慮使用這種方案，但是不太推����

利用 rem 適配

然而最常見的適配方法也就是使用rem來��(jìn)行適配，很多小伙伴可能對��em��rem有些混淆，傻傻的分不清楚��

em：是根據(jù)父節(jié)��(diǎn)的字體大小��(jìn)行計(jì)算的單位��

rem�� r 代表根（HTML��，知道r代表HTML后就可以明確的知道rem是通過HTML的字體大小��(jìn)行計(jì)算的單位��

(function() {
    //  獲取到HTML
    var oHtml = document.documentElement;   
    //  獲取到移��(dòng)��(shè)備的html的外圍寬度，如果給HTML��(shè)置寬度會(huì)印象��(jié)��
    _hWidth = oHtml.getBoundingClientRect().width;    
    //  獲取到移��(dòng)��(shè)備的視口的寬��，推薦使��
    _Width = oHtml.clientWidth;      
    //  這里��16是擬定值，可以隨意��(shè)��，最好能與你測試的設(shè)備寬度能整除，方便計(jì)��
    oHtml.style.fontSize = _Width / 16 + "px";     
})();

改動(dòng)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;
}

既然已經(jīng)知道兩者的區(qū)��，那么在��(shí)際開��(fā)過程中應(yīng)該如何使��rem完成適配，上面的css代碼����rem又是怎么��(jì)算得出來的呢��

公式：元素所需��(shè)置的rem��=��(shè)��(jì)圖測量的��/(屏幕的寬��/N)，這里��N就是��JavaScript��(jì)算的��(shí)候除以的那��(gè)16。其原理是把屏幕平均分成了N��，并把一份的值賦值給��rem，也就是html根元素的字體大小��

我也去看了一下如某寶、某東的適配方案，他們同樣使用的��rem��(jìn)行適配的，但是與他們在rem賦值的做了判斷，當(dāng)屏幕大于750px就將屏幕寬度鎖死，固定在750px��rem成為一��(gè)固定的��。這樣��(dāng)屏幕過大的時(shí)候，頁面��(nèi)容不��(huì)變的特別����

(function() {
    //  獲取到HTML
    var oHtml = document.documentElement;   
    //  獲取到移��(dòng)��(shè)備的html的外圍寬��，如果給HTML��(shè)置寬度會(huì)印象��(jié)��
    _hWidth = oHtml.getBoundingClientRect().width;    
    //  獲取到移��(dòng)��(shè)備的視口的寬��，推薦使��
    _Width = oHtml.clientWidth;      
    _Width = _Width>=750?750:_Width;
    //  這里��16是擬定��，可以隨意設(shè)��，最好能與你測試的設(shè)備寬度能整除，方便計(jì)��
    oHtml.style.fontSize = _Width / 16 + "px";     
})();

很多大廠都是采用��rem的這種適配方案，大家可以自��Google一��，大廠是如何處理的。理論上是差不多��，可能就是在用法以及對于rem��(jì)算的處理有些不同而已。不管如何處理只要懂得這��(gè)道理就好����

移動(dòng)端事��

隨著��(shè)備的不同所要應(yīng)用的事件也就��(huì)有所不同，然而在移動(dòng)的應(yīng)��onclick的時(shí)候是可以兼容��，會(huì)存在一些小問題，所以針對移��(dòng)��，推出了移動(dòng)端專用的事件，那么今天就具體和大家說一��，移��(dòng)端的事件的一些問��，以及在解決這些問題的時(shí)候引��(fā)出的另一些問����

��(xiàn)在會(huì)想起最初做移動(dòng)端的��(shí)候，是使��onclick事件去完成一些操��，雖然移��(dòng)端能夠完��onclick的一些操��，還是會(huì)存在一些問����

Click事件在移��(dòng)端開��(fā)中會(huì)��300ms的延遲，��?yàn)樵谝��?dòng)端早��，瀏覽器系��(tǒng)有放大縮小功能，用戶在屏幕上��(diǎn)擊兩次以��，系��(tǒng)��(huì)觸發(fā)放大或者縮小的功能，因此系��(tǒng)做了一��(gè)處理，當(dāng)觸摸一次后，在300ms以后有沒有��(jìn)行二次觸��，如果存在二次觸��，說明就觸發(fā)了放大或縮小功能，否則的話只是單單執(zhí)��click事件。因此當(dāng)click��(shí)候，所有用戶必須等300ms后才��(huì)觸發(fā)click事件。所以當(dāng)在移��(dòng)端使��click事件的時(shí)��，會(huì)感覺��300ms的延����

移動(dòng)端主要分為三��(gè)比較重要的事件，也是��(jīng)常用的事件：

touchStart ：手指按��
touchMove ：手指移��(dòng)
touchEnd ：手指離��

移動(dòng)端事件對��

移動(dòng)端的事件對象與web端中的事件對象有些不太一����web端我們在對頁面��(jìn)行操作的��(shí)候大多數(shù)都是依賴于鼠��(biāo)，但是移��(dòng)端是依賴于屏幕的，通過手指的觸摸屏��，給用戶反饋，鼠��(biāo)只能有一��(gè)，但是手��(jī)卻又很多(��"?"��)

移動(dòng)端的事件對象存在于事件函��(shù)中：
例子��

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

事件對象屬性：

大家可以通過上面的代碼輸出一下ev（事件對象），在控制臺查看一下移��(dòng)端都包含哪些東西��

除了上述事件，有��(gè)特殊事件再說一��orientationChange這��(gè)事件是蘋果公司為safari中添加的。以便開��(fā)人員能夠確定用戶何時(shí)將設(shè)備由橫向查看切換為縱向查看模��。在��(shè)備旋��(zhuǎn)的時(shí)��，會(huì)觸發(fā)這��(gè)事件��

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

orientation media query��ios3.2+和安��2.0+上還有其他瀏覽器上有效。有些設(shè)備并沒有提供orientationchange事件，但不觸��(fā)窗口��resize事件。并��media queries也不支持的情況下，我們該怎么辦呢？可以用resize事件來判��。用innerWidth��innerHeight，可以檢索得到屏幕大��。依��(jù)寬和高的大小比較判斷，寬小于高為豎屏，寬大與高就是橫��。就��(xiàn)在的移動(dòng)端發(fā)展而言已經(jīng)又大多數(shù)移動(dòng)��(shè)備已��(jīng)支持這��(gè)事件����

移動(dòng)端開��(fā)注意事項(xiàng)

在移��(dòng)端開��(fā)的過程中，瀏覽器的模擬器有��(shí)可能��(huì)不支��on的方法綁定事��，所以一般要用事件綁定的方式給元素綁定事件��

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

移動(dòng)端開��(fā)有一��(gè)很大的坑，層級為了這��(gè)坑也是翻山越��。這��(gè)大坑就是事件��(diǎn)��，最初看到這��(gè)名詞的時(shí)候也是一臉的懵��，不知道怎么回事��

什么是事件��(diǎn)透？��(dāng)上層元素��(fā)生點(diǎn)擊的��(shí)��，下層元素也有點(diǎn)擊特性，在大��300ms��，如果上層元素消失或者隱��，目��(biāo)��(diǎn)��(huì)“漂移”到下層元素身上，觸��(fā)��(diǎn)擊事����

解決方法��

下層不要使用有點(diǎn)擊（焦點(diǎn)）特性的元素��

阻止document的默��(rèn)行為

總結(jié)

寫了好多東西，只是��(gè)人的一些對于移��(dòng)端開��(fā)的一些總��(jié)，可能寫的有些亂，很感謝大家能夠花費(fèi)這么長時(shí)間來閱讀這篇文章。文章中哪里有錯(cuò)誤的��，大家可以在下面給我留言，我��(huì)盡快做出改正��

如果你和我一樣喜歡前端的話，可以加Qq群：135170291，期待大家的加入��