HTML5開發注意事項及BUG解決

2022-07-12 10:48:13 字數 2663 閱讀 8494

1.點透

q:元素a上定位另外乙個元素b,點選元素b,如果元素a有事件或鏈結,會觸發元素a上的事件或鏈結,即點透

a:在元素b的touchend中增加ev.preventdefault();阻止預設事件即可,請注意:此時元素內容如果過長,其原生滑動也同時阻止

elmb.addeventlistener('touchend', function

(ev) ,

false);

2.區分點選與滑動

q:元素a新增touchstart或touchend事件後,如果在元素a上滑動也會觸發點選事件

a:區分是否是點選事件,有2種方法

方法一:

在touchend時判斷touchmove事件是否觸發即可

function

tap(elm, callback)

function

end(ev)

}

this.removeeventlistener('touchmove', move, false

);

this.removeeventlistener('touchend', end, false

); }

}}

方法二:

touchstart時記錄座標(x1、y1),touchend時判斷當前座標(x2、y2)是否等於x1、y1

function

tap(elm, callback)

}

this.removeeventlistener('touchend', end, false

); }

}}

呼叫:

<

div>點選此處

div>

window.onload =);

};

3.點選元素時加觸發效果

q:長按乙個元素時如何給元素加上效果

a:首先嘗試在css中給元素定義:active偽類,如果沒效果則在html中給元素加上ontouchstart=""觸發:active,如果還是不行,則考慮用js

動態新增樣式

4.用translatex或translatey時產生抖動

q:在給乙個元素a用translate時,其後面的元素b有時會產生文字抖動或背景、邊框抖動

a:給元素的父級新增translatez即可解決

5.彈性布局寬度的問題

q:給一行元素新增彈性布局,flex都為1,每個元素中內容長度不一致,導致不等分

a:給內部元素固定寬度即可

6.在safari瀏覽器中不識別日期

q:safari瀏覽器中

alert(new date('2013-11-12'));

2013-11-12這種日期格式不識別

a:在safari瀏覽器中設定日期需要將格式轉成2013/11/12即可

7.圖示模糊

q:按照320解析度切的圖示,在iphone中圖示模糊

a:iphone等手機解析度是640的,所以應該按照640解析度切,然後用background-size:50%;縮放,或寫固定寬度,如在640寬度下的一

個圖示寬為64px高為48px,則用backgroun-size縮放後在320解析度下的background-size:32px 24px

8.用px切的頁面在小公尺等手機中網頁被放大

q:用px切的頁面在小公尺等手機的瀏覽器中比別的手機頁面大

a:px在瀏覽器中表現不一致,任何瀏覽器預設字型大小為16px,而10px是16px的62.5%,此時設定html字型大小為62.5%,再用css3提供的rem(

根字型大小大小,即html的字型大小大小)將px除10進行換算即可解決

例:

html .header .footer

9.按照設計圖切出的頁面很大

q:設計圖給的是640px寬的,放到手機裡看很大,用viewport縮放0.52倍在別的手機都正常,但是在小公尺中用自帶瀏覽器,字型大小設為中,縮

放不管用

a:首先應禁止縮放,會帶來別的問題,如從資料庫中讀出的字型帶著單位如12px,字會顯得非常的小

即viewport應寫為

<

meta

name

="viewport"

content

="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;"

/>

其次用 

width=device-width後,任何頁面在手機裡都會被解析成320寬度,所以640px的設計圖中量出的單位應除2即可

10.1px的問題

q:寬度小於1px的線有時顯示不出來,等於1px的線有的細有的粗

a:網頁中最小單位為1px,小於1px的線不顯示出來也是正常的,應避免設定小於1px的單位。線時細時粗暫無太好的辦法,一是用代替

,二是用很淡的顏色

11.用background-size後背景定位失效

q:用background-size後,合併的背景圖定位不準確

a:首先用了background-size後原來的單位也應該縮放,如果background-size:50%;那麼量出的單位都應*0.5

html5注意事項

html5可以說是負責 的骨架 很基礎也很重要 那麼有哪些需要注意的點呢 1 html檔案字尾 html htm 系統的原因當初要求三個字尾現在發展可以用各種不同長度的字尾 如果html網頁檔案的字尾是.htm,那麼在其中就不能夠完整的使用html5技術。2 html不區分大小寫 xhtml 到了h...

HTML簡介及注意事項

1 html是超文字標記語言 2 html書寫規則注意事項 1 字尾名為 html 推薦 或者 htm 2 一般所有的內容都寫在內 3 標籤都寫在 裡面,標籤都是成對的 例如 html 是開始標籤,html 是結束標籤 開始標籤與結束標籤之間叫做 標籤體 但是,有的沒有結束標籤 例如 src ima...

Html注意事項

1 特殊字元 空格 2 跨多行和跨多列 colspan rowspan 3 使用框架 3.1框架就是將瀏覽器視窗劃分為若干個小視窗,每個視窗可以顯示不同的url網頁。定義語法 3.2 frame常見屬性和 說明 src 指示載入網頁的url位址 bordercolor 設定邊框顏色 framebor...