關於touch和web端的CSS說明

什麼是Viewport

手機瀏覽器是把頁面放在一個虛擬的「窗口」（viewport）中，一般這個虛擬的「窗口」（viewport）比屏幕寬，這樣就不用把每一個網頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），用戶能夠經過平移和縮放來看網頁的不一樣部分。移動版的 Safari 瀏覽器最新引進了 viewport 這個 meta tag，讓網頁開發者來控制 viewport 的大小和縮放，其餘手機瀏覽器也基本支持。

Meta標籤

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

1. width - 可視區域的寬度,爲一個正整數，或字符串"device-width"

2. height - 可視區域的高度,爲一個正整數，或字符串"device-height"

3. initial-scale - 初始的縮放比例,取值1.0則頁面按實際尺寸顯示，無任何縮放

4. minimum-scale - 容許用戶縮放到的最小比例,爲一個數字，能夠帶小數

5. maximum-scale - 容許用戶縮放到的最大比例,爲一個數字，能夠帶小數

6. user-scalable - 用戶是否能夠手動縮放,值爲"no"或"yes", no 表明不容許，yes表明容許

<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" />

1. telephone - 數字是否轉化爲撥號連接，值爲"no"或"yes", no 表明不容許，yes表明容許，當設置爲no,<a href="tel:4006661166"></a>打電話

2. email - 是否自動識別郵箱，值爲"no"或"yes", no 表明不容許，yes表明容許，當設置爲no,當設置爲no,<a href="mailto:someone@microsoft.com?subject=Hello%20again">
   發送郵件

獲取滾動條的值

window.scrollY  window.scrollX

桌面瀏覽器中想要獲取滾動條的值是經過document.scrollTop和document.scrollLeft獲得的，android和IOS經過window.scrollY window.scrollX

禁止複製粘貼文本

-webkit-user-select:none

移動端touch事件

1. touchstart //當手指接觸屏幕時觸發

2. touchmove //當已經接觸屏幕的手指開始移動後觸發

3. touchend //當手指離開屏幕時觸發

4. touchcancel//當某種touch事件非正常結束時觸發

這4個事件的觸發順序爲：
touchstart -> touchmove -> touchend ->touchcancel

overflow 屬性

overflow 屬性規定當內容溢出元素框時發生的事情

1. visible 默認值。內容不會被修剪，會呈如今元素框以外。

2. hidden 內容會被修剪，而且其他內容是不可見的。

3. scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。

4. auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。

5. inherit 規定應該從父元素繼承 overflow 屬性的值。

background-image和image的加載區別

在網頁加載的過程當中，以css背景圖存在的圖片background-image會等到結構加載完成（網頁的內容所有顯示之後）纔開始加載，而html中的標籤img是網頁結構（內容）的一部分會在加載結構的過程當中加載，換句話講，網頁會先加載標籤img的內容，再加載背景圖片background-image