HTML的全稱是超文本標記語言,是一種標記語言。它包括一系列標簽,可以統(tǒng)一網(wǎng)絡(luò)上文檔的格式,將分散的互聯(lián)網(wǎng)資源連接成一個邏輯整體。HTML是由HTML命令組成的描述性文本,可以解釋文字、圖形、動畫、聲音、表格、鏈接等。Html是一種用來描述網(wǎng)頁的語言。它被稱為超文本標記語言,它是一種標記語言。它包括一系列標簽,可以統(tǒng)一網(wǎng)絡(luò)上文檔的格式,將分散的互聯(lián)網(wǎng)資源連接成一個邏輯整體。

創(chuàng)新互聯(lián)建站長期為上1000家客戶提供的網(wǎng)站建設(shè)服務(wù),團隊從業(yè)經(jīng)驗10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為納溪企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、成都做網(wǎng)站,納溪網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
在頁面中樣式中加上下面的css代碼
*{
-webkit-overflow-scrolling:?touch;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
不一樣,需增加自適應(yīng)標簽來保持一樣。
代碼如下:
meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/
解釋:Viewport指用戶網(wǎng)頁的可視區(qū)域,content中的“width”指的是虛擬窗口寬度,上面代碼意為虛擬窗口/頁面寬度初始比例為1,最小比例為1,最大比例為1,用戶不可擴展,頁面不可縮放。
擴展資料:
HTML5的事件屬性和異常處理
事件屬性
HTML 5 元素可擁有事件屬性,這些屬性在瀏覽器中觸發(fā)行為,比如當用戶單擊一個HTML 5元素時啟動一段 JavaScript。下面列出的事件屬性,可以把它們插入 HTML 標簽來定義事件行為。
HTML 5 中的新事件屬性:
onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onmessage, onmousewheel, onresize, onscroll, onunload。
一個觸屏網(wǎng)站到底和傳統(tǒng)的pc端網(wǎng)站有什么區(qū)別呢,交互方式的改變首當其沖。例如我們常用的click事件,在觸屏設(shè)備下是如此無力。
手機上的大部分交互都是通過touch來實現(xiàn)的,于是,對于觸屏的交互式網(wǎng)站,觸摸事件是相當重要的。
Apple在iOS 2.0中引入了觸摸事件API,Android正迎頭趕上這一事實標準,縮小差距。最近一個W3C工作組正合力制定這一觸摸事件規(guī)范。
規(guī)范
這里我們介紹幾種普及得比較好的觸摸事件,你可以在絕大多數(shù)現(xiàn)代瀏覽器中來測試這一事件(必須是觸屏設(shè)備哦):
touchstart:觸摸開始的時候觸發(fā)
touchmove:手指在屏幕上滑動的時候觸發(fā)
touchend:觸摸結(jié)束的時候觸發(fā)
而每個觸摸事件都包括了三個觸摸列表,每個列表里包含了對應(yīng)的一系列觸摸點(用來實現(xiàn)多點觸控):
touches:當前位于屏幕上的所有手指的列表。
targetTouches:位于當前DOM元素上手指的列表。
changedTouches:涉及當前事件手指的列表。
每個觸摸點由包含了如下觸摸信息(常用):
identifier:一個數(shù)值,唯一標識觸摸會話(touch session)中的當前手指。一般為從0開始的流水號(android4.1,uc)
target:DOM元素,是動作所針對的目標。
pageX/pageX/clientX/clientY/screenX/screenY:一個數(shù)值,動作在屏幕上發(fā)生的位置(page包含滾動距離,client不包含滾動距離,screen則以屏幕為基準)。
radiusX/radiusY/rotationAngle:畫出大約相當于手指形狀的橢圓形,分別為橢圓形的兩個半徑和旋轉(zhuǎn)角度。初步測試瀏覽器不支持,好在功能不常用,歡迎大家反饋。
有了這些信息,我們就可以依據(jù)這些事件信息為用戶提供不同的反饋了。
下面,我將為大家展示一個小demo,用touchmove實現(xiàn)的單指拖動:
/*單指拖動*/
var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
// 如果這個元素的位置內(nèi)只有一個手指的話
if (event.targetTouches.length == 1) {
event.preventDefault();// 阻止瀏覽器默認事件,重要
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
obj.style.left = touch.pageX-50 + 'px';
obj.style.top = touch.pageY-50 + 'px';
}
}, false);
關(guān)于a標簽四個偽類在觸屏設(shè)備中的小技巧:
我們都知道a標簽的四個偽類link,visited,active,hover是專為click事件設(shè)計的,所以在觸屏網(wǎng)站中盡量不要使用它們。經(jīng)測試大部分也是不可用的。但是這里有一個關(guān)于hover的小技巧,當你點擊過一個按鈕之后,這個按鈕就會一直處于hover的狀態(tài),此時你基于這個偽類所設(shè)置的css也是起作用的,直到你用手指點擊另外一個按鈕,hover狀態(tài)就會轉(zhuǎn)移到另一個按鈕。利用這一點,我們可以做出一些小效果。此技巧在大多數(shù)瀏覽器中還是可用的。
理想很豐滿,現(xiàn)實很骨感!
雖然w3c為多點觸控做好了準備,遺憾的是鮮有瀏覽器支持多點觸控的特性,尤其是android平臺上的瀏覽器,也就讓上文介紹的手指列表變?yōu)榱丝照劊东@兩個觸摸點會直接導致觸摸失效!好在ios設(shè)備自帶的safari瀏覽器能夠支持這一特性,讓我們對未來充滿希望。畢竟,我們被鼠標的單點操作禁錮了太久,多指操作一個網(wǎng)站是多么令人興奮!
HTML5 canvas 怎樣防止屏幕自動睡眠并檢測手機和平板鎖屏事件
在Android中循環(huán)播放一秒(時間很短)的視頻可以阻止自動睡眠,終于不需要用那些還沒有正式被瀏覽器支持的新API了。而iOS似乎是用JavaScript的定時器不斷self.location的方式阻止屏幕自動睡眠的,但據(jù)說iOS7無效。。。
在Android用Page Visitable API可以檢測到鎖屏事件,但在iOS7測試無效,其他版本的iOS不清楚。
播放不了是因為手機瀏覽器不支持html5的這個video新特性。
iOS方面,根據(jù)蘋果官方提供的文檔,Mobile Safari支持包括視頻 (video)和音頻(audio) 標簽,離線存儲 (web storage),主流的CSS3效果 (transitions, animations, transforms, gradient, masks等)在內(nèi)的HTML5特性的。此外,雖然未更新文檔,4.2 據(jù)說也加入了對Web Sockets,部分XHR-2,加強了對Canvas和SVG的支持。可惜的是,似乎尚未支持Web Worker。
Android方面,Android 2.2 和 2.3 的瀏覽器對HTML5的支持似乎相對有限,應(yīng)該支持CSS3 (因為他們都是webkit內(nèi)核),不支持SVG和Web Sockets,部分支持Video標簽 (WebM)。
網(wǎng)頁題目:html5手機事件的簡單介紹
當前網(wǎng)址:http://chinadenli.net/article15/dsgiedi.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、手機網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、ChatGPT、Google
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)