jquery判斷移動(dòng)端問題

if?((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows?Phone|Phone)/i)))?{

專注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)維西免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

手機(jī)端顯示的代碼

}else{

非手機(jī)端要顯示的代碼

}

jquery怎么實(shí)現(xiàn)移動(dòng)端手指滑動(dòng)事件?

一、原理及實(shí)現(xiàn)方法如下：

1、當(dāng)開始一個(gè)touchstart事件的時(shí)候，獲取此刻手指的橫坐標(biāo)startX和縱坐標(biāo)startY；

2、當(dāng)觸發(fā)touchmove事件時(shí)，在獲取此時(shí)手指的橫坐標(biāo)moveEndX和縱坐標(biāo)moveEndY;最后，通過這兩次獲取的坐標(biāo)差值來判斷手指在手機(jī)屏幕上的滑動(dòng)方向。

二、注意：

手指在滑動(dòng)整個(gè)屏幕時(shí)，會(huì)影響瀏覽器的行為，比如滾動(dòng)和縮放。所以在調(diào)用touch事件時(shí)，要注意禁止縮放和滾動(dòng)。

1.禁止縮放?

通過meta元標(biāo)簽來設(shè)置。

2.禁止?jié)L動(dòng)?

preventDefault是阻止默認(rèn)行為，touch事件的默認(rèn)行為就是滾動(dòng)。?

event.preventDefault()。

怎么使用JQuery Mobile開發(fā)移動(dòng)網(wǎng)站

方法/步驟

簡單的說明一下JQueryMobile. 它是一個(gè)很好的跨平臺(tái)的移動(dòng)端網(wǎng)站開發(fā)框架。 是一個(gè)前臺(tái)的框架?，F(xiàn)在要使用這個(gè)框架組一個(gè)界面，這個(gè)界面很簡單， 但是麻雀雖小五臟俱全， 然后模板實(shí)現(xiàn)， 知識(shí)講解完畢。html要使用HTML5的標(biāo)準(zhǔn)來寫， 因?yàn)镴QueryMobile是基于HTML5的。 書寫html5的格式如圖，

既然使用JQueryMobile就要有這個(gè)框架， 這里可以使用本地引用的方式， 和網(wǎng)上引用， 也叫做cdn引用。就是比較穩(wěn)定和快速的引用外部文件的一種方式。 這里使用cdn的方式， 這樣只要可以上網(wǎng)就可以使用該框架。

在寫移動(dòng)端的網(wǎng)站的時(shí)候， 一定要寫一個(gè)meta的name為viewport的屬性， 因?yàn)樵搶傩源碇W(wǎng)站頁面的自適應(yīng)。簡單的寫法為：meta name="viewport" content="width=device-width, initial-scale=1" 代表著網(wǎng)站為驅(qū)動(dòng)設(shè)備的寬度。

然后加入框架之后， 寫一個(gè)簡單的界面。 這里面JQueryMobile大量的使用了一個(gè)data-的屬性， 這里使用最多的事data-role。 代表著他默認(rèn)的樣式規(guī)則。 就是提前定義好了很多的樣式來供你使用。 常用的page. 代表著頁面， listview， 代表著一個(gè)列表視圖。下面是代碼和效果圖

稍微說明一下。

data-role="page" 是代表著一個(gè)頁面可以看做該內(nèi)容下是一個(gè)頁面顯示的內(nèi)容

data-role=”header"代表著 頁面的頁頭， 就是頁面的最上面顯示的內(nèi)容這里需要注意， 里面要加上子標(biāo)簽內(nèi)容， 要不然， 就不會(huì)居中顯示內(nèi)容了。推薦使用h1.

data-role="footer"代表著頁腳的內(nèi)容。 也是網(wǎng)站的一個(gè)說明信息。 或者是一個(gè)底部導(dǎo)航菜單。 還有一部分， 就是data-role="content" 是代表著頁面內(nèi)容部分， 主要的內(nèi)容在這里面顯示。

這3個(gè)部分構(gòu)成了一個(gè)簡單的頁面。 所以， 現(xiàn)在可以體驗(yàn)到它的強(qiáng)大， 不用寫太多的代碼一個(gè)簡單的框架就好了， 下面繼續(xù)增加一個(gè)listveiw的列表視圖。

完成列表視圖的代碼， 增加一個(gè)文章列舉表的代碼， 這里列表是使用data-role="listview" 來修飾樣式。 然后這里只需要加上data-role="listview" 你發(fā)現(xiàn)想要的list效果就實(shí)現(xiàn)了。 這樣我們一個(gè)簡單的頁面效果就實(shí)現(xiàn)了。