移動端-筆記

時間 2019-11-13

標籤移動筆記欄目無線简体版

原文原文鏈接

meta基礎知識css

H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面html

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

viewport模板——通用android

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>標題</title>
<link rel="stylesheet" href="index.css">
</head>

移動端touch事件
當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件ios

touchstart——當手指觸碰屏幕時候發生。
touchmove——當手指在屏幕上滑動時連續觸發。一般咱們再滑屏頁面，會調用event的preventDefault()能夠阻止默認狀況的發生：阻止頁面滾動
touchend——當手指離開屏幕時觸發
touchcancel——系統中止跟蹤觸摸時候會觸發。例如在觸摸過程當中忽然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用web

TouchEvent
touches：屏幕上全部手指的信息
targetTouches：手指在目標區域的手指信息
changedTouches：最近一次觸發該事件的手指信息
touchend時，touches與targetTouches信息會被刪除，changedTouches保存的最後一次的信息，最好用於計算手指信息瀏覽器

webkit表單元素的默認外觀怎麼重置
.css{-webkit-appearance:none;}app

webkit表單輸入框placeholder的顏色值能改變麼
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
webkit表單輸入框placeholder的文字能換行麼
ios能夠，android不行~ide

::-ms-expand 適用於表單選擇控件下拉箭頭的修改，有多個屬性值，設置它隱藏 (display:none) 並使用背景圖片來修飾可獲得咱們想要的效果。函數

select::-ms-expand {
display: none;
}spa

audio元素和video元素在ios和andriod中沒法自動播放
應對方案：觸屏即播

$('html').on('touchstart',function(){
audio.play()
})

播放視頻不全屏

<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

點擊穿透問題

什麼是點擊穿透？

假如頁面上有兩個元素A和B。B元素在A元素之上。咱們在B元素的touchstart事件上註冊了一個回調函數，該回調函數的做用是隱藏B元素。咱們發現，當咱們點擊B元素，B元素被隱藏了，隨後，A元素觸發了click事件。

這是由於在移動端瀏覽器，事件執行的順序是touchstart > touchend > click。而click事件有300ms的延遲，當touchstart事件把B元素隱藏以後，隔了300ms，瀏覽器觸發了click事件，可是此時B元素不見了，因此該事件被派發到了A元素身上。若是A元素是一個連接，那此時頁面就會意外地跳轉。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。