WEB前端開發 WAP頁面製作需要注意的幾點

2021-07-06 00:03:40 字數 2082 閱讀 8067

1.遵循

html

頁面的編寫規則

2.新建的時候注意文件型別:

xhtml-mobile10.dtd

3.特殊的meta標籤

網頁手機wap

2.0網頁的head裡加入下面這條元標籤,在手機瀏覽器中頁面將以原始大小顯示,並不允許縮放。

width – viewport的寬度 height – viewport的高度

initial-scale – 初始的縮放比例

minimum-scale – 允許使用者縮放到的最小比例

maximum-scale – 允許使用者縮放到的最大比例

user-scalable – 使用者是否可以手動縮放

告訴裝置忽略將頁面中的數字識別為**號碼

5.a鏈結不需要新視窗開啟

6.大多數的手機只有一種字型

7.能利用樣式寫的盡量不用 為了手機的流量,提倡盡量少用背景圖

9.logo的尺寸大小一般是實際尺寸的2倍(防止模糊)

10.背景圖示利用css3的樣式進行縮放 background-size:x y;

11.js一般的效果在手機上都支援,但是現在大部分的效果都需要手指劃過觸發這就需要新增一些庫檔案或是自己寫一些手機的觸發事件

處理touch事件能讓你跟蹤使用者的每一根手指的位置。你可以繫結以下四種touch事件:

1.touchstart:  // 手指放到螢幕上的時候觸發

2.touchmove:  // 手指在螢幕上移動的時候觸發

3.touchend:  // 手指從螢幕上拿起的時候觸發

4touchcancel:  // 系統取消touch事件的時候觸發。至於系統什麼時候會取消,不詳

屬性1.client / clienty:// 觸控點相對於瀏覽器視窗viewport的位置

2.pagex / pagey:// 觸控點相對於頁面的位置

3.screenx /screeny:// 觸控點相對於螢幕的位置

4.identifier: // touch物件的unique id

12.刪除**內不必要的空白區和**內的注釋

手機網頁設計注意事項和解決方法

不使用絕對寬度

由於網頁會根據螢幕寬度調整布局,所以不能使用絕對寬度的布局,也不能使用具有絕對寬度的元素。這一條非常重要。

具體說,css **不能指定畫素寬度:width:*** px;

只能指定百分比寬度:width: xx%;

或者width:auto;但是有的是需要固定寬度的。

相對大小的字型

字型也不能使用絕對大小(px),而只能使用相對大小(em)。

body 

上面的**指定,字型大小是頁面預設大小的 100%,即 16 畫素。

h1 然後,h1的大小是預設大小的1.5倍,即 24 畫素(24/16=1.5)。

small 

small 元素的大小是預設大小的0.875倍,即 14 畫素(14/16=0.875)。

滑鼠事件(mouseover)

考慮到觸控螢幕操作,使用者無法用手指進行over的操作,因此應禁止在應用於移動裝置訪問的網頁使用mouseover。

* uc瀏覽器相關(由於uc公升級頻繁 以下不支援的說法僅限於uc7.6以下版本)

uc瀏覽器相對於其他手機瀏覽器而言,對html標籤和css屬性存在有特殊的、自定義的處理方式。

在實際開發中,我們發現了uc瀏覽器對css存在一些「特殊照顧」:

不支援font-family屬性,也就是說,在uc瀏覽器你只能看到一種字型;

不支援font-szie屬性,也就是說,在uc瀏覽器你只能看到一樣大小的字型;

不支援width、height、padding、margin、line-height屬性,也就是說,在uc瀏覽器只能通過p、br等html標籤來換行以達到字元上下間隔;

不支援固定畫素的寬度,100%顯示頁面,也就是說,在uc瀏覽器始終將看到的是「滿屏的」;

不支援浮動、層疊布局,float和position屬性無效,也就是說,在uc瀏覽器你只能看到「左對齊」。

支援background-color,但不支援background-image,也就是說不支援css背景圖顯示,在uc瀏覽器你只能看到背景色。

轉行學習web前端開發需具備哪些條件

人們在享受網際網路帶來的便捷也給網際網路產品提出了新的需求,這意味著前端開發人員也有了更多的機會和挑戰。無論是大小公司,對前端開發工程師的需求都是在快速 薪資待遇也隨之上公升很快。前端開發工程師就業機會多,創業機會多,且就業範圍廣,幾乎各行各業都有需要,網際網路公司 金融,等等都能進。並且對從事開發...

開發web前端 web前端 開發筆記

我是孟噠噠一名web前端開發工程師,今天給大家分享一下web前端是的一些筆記應用,希望對你們有幫助。物件導向是乙個開發思想,它把注意點都放到了物件上。物件導向強調的幾個概念 1 類 類是一批具備相同屬性和行為的事物的抽象,為什麼是抽象?因為不是具體的,也就是說不是實實在在存在的東西 看不見摸不著 2...

web前端頁面效能測試

特別是使用者對系統要求越來越高,除了要求功能完備,對介面的美觀 易用性也提出了更高的要求,越炫的頁面也就意味著頁面中要包含更多的指令碼 樣式表 和flash,頁面的資料量也就越大,這對web系統的效能提出了極大的挑戰。減少請求和響應的往返次數 http快取是最好的減少客戶端伺服器端往返次數的辦法。快...