關(guān)于touch和web端的CSS說明

Bamboy 發(fā)布于2019-08-29 11:08 / 1231人閱讀

摘要：內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。規(guī)定應(yīng)該從父元素繼承屬性的值。

什么是Viewport

手機(jī)瀏覽器是把頁面放在一個虛擬的“窗口”（viewport）中，通常這個虛擬的“窗口”（viewport）比屏幕寬，這樣就不用把每個網(wǎng)頁擠到很小的窗口中（這樣會破壞沒有針對手機(jī)瀏覽器優(yōu)化的網(wǎng)頁的布局），用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。移動版的 Safari 瀏覽器最新引進(jìn)了 viewport 這個 meta tag，讓網(wǎng)頁開發(fā)者來控制 viewport 的大小和縮放，其他手機(jī)瀏覽器也基本支持。

Meta標(biāo)簽

width - 可視區(qū)域的寬度,為一個正整數(shù)，或字符串"device-width"

height - 可視區(qū)域的高度,為一個正整數(shù)，或字符串"device-height"

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

minimum-scale - 允許用戶縮放到的最小比例,為一個數(shù)字，可以帶小數(shù)

maximum-scale - 允許用戶縮放到的最大比例,為一個數(shù)字，可以帶小數(shù)

user-scalable - 用戶是否可以手動縮放,值為"no"或"yes", no 代表不允許，yes代表允許

telephone - 數(shù)字是否轉(zhuǎn)化為撥號鏈接，值為"no"或"yes", no 代表不允許，yes代表允許，當(dāng)設(shè)置為no,打電話

email - 是否自動識別郵箱，值為"no"或"yes", no 代表不允許，yes代表允許，當(dāng)設(shè)置為no,當(dāng)設(shè)置為no,
發(fā)送郵件

獲取滾動條的值

window.scrollY  window.scrollX

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

禁止復(fù)制粘貼文本

-webkit-user-select:none

移動端touch事件

touchstart //當(dāng)手指接觸屏幕時觸發(fā)

touchmove //當(dāng)已經(jīng)接觸屏幕的手指開始移動后觸發(fā)

touchend //當(dāng)手指離開屏幕時觸發(fā)

touchcancel//當(dāng)某種touch事件非正常結(jié)束時觸發(fā)

這4個事件的觸發(fā)順序?yàn)椋?br>touchstart -> touchmove -> touchend ->touchcancel

overflow 屬性

overflow 屬性規(guī)定當(dāng)內(nèi)容溢出元素框時發(fā)生的事情

visible 默認(rèn)值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。

hidden 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。

scroll 內(nèi)容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。

auto 如果內(nèi)容被修剪，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。

inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。

background-image和image的加載區(qū)別

在網(wǎng)頁加載的過程中，以css背景圖存在的圖片background-image會等到結(jié)構(gòu)加載完成（網(wǎng)頁的內(nèi)容全部顯示以后）才開始加載，而html中的標(biāo)簽img是網(wǎng)頁結(jié)構(gòu)（內(nèi)容）的一部分會在加載結(jié)構(gòu)的過程中加載，換句話講，網(wǎng)頁會先加載標(biāo)簽img的內(nèi)容，再加載背景圖片background-image