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

2021-06-22 15:18:05 字數 1645 閱讀 8269

原文:

一、關於手機頁面的標準頭

字元編碼使用utf-8

指定頁面手機記憶體快取中的儲存時間段

html**  

<

meta

name="viewport"

content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

/>

device-width通知瀏覽器使用裝置的寬度作為可視區的寬度

initial-scale - 初始的縮放比例

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

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

解決原先在pocket pc 2002上能夠全螢幕顯示的flash影片(240×320),到了pocket

pc2003之後,自動會縮小的問題

二、關於css樣式

1頁面自帶css建議style標籤頭標準化,格式:

id="internalstyle">

2 部分手機瀏覽器對如下css樣式支援不是很好,建議慎重使用:

· 不支援font-family屬性,也就是說,在很多瀏覽器可能只有一種預設字型;

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

· 不支援width、height、padding、margin、line-height屬性,如,在uc瀏覽器只

能通過p、br 等html標籤來換行以達到字元上下間隔;

· 不支援固定畫素的寬度,100%顯示頁面,如:在uc瀏覽器始終將看到的是「滿屏的

」;· 不支援浮動、層疊布局,float和position屬性無效,如:在uc瀏覽器你只能看到

「左對齊」,建議使用table格局。

· 支援background-color,但不支援background-image,也就是說不支援css背景圖

顯示,在uc瀏覽器你只 能看到背景色,為了手機的流量,提倡盡量少用背景圖。

· max-device-width這樣的選項,限定螢幕寬度小於480的裝置才採用該樣式表,代

碼格局如下:

三、其他

1網頁大小限制:建議低版本頁面不超過15k,高版本頁面不超過60k。

2部分手機不支援png8和png24,所以盡量使用jpg和gif的;

3另外對於平滑的漸變等精細的細節,部分手機的色彩支援度並不能達到要求,所

以慎用有平滑漸變的bar設計;

4部分手機對於超大,既不進行縮放,也不顯示橫下滾動條;

5少數手機在開啟超過20k的測試頁面時,會顯示記憶體不足

6大部分手機不支援表單元素的「disable」屬性

7在手持裝置上,按鈕最好不要直接用img標籤

四、瀏覽器使用情況:

cnnic與cr-nielsen聯合發布的《2023年中國移動網際網路與3g使用者調查報告》顯示,

手機自帶瀏覽器市場份額高達49.6%,

在現有手機瀏覽器品牌中,

uc手機瀏覽器份額11.2%,

opera手機瀏覽器份額1.8%,

其他手機瀏覽器份額2.4%。

儘管今年 uc瀏覽器扳回一城,重新超越了qq瀏覽器,但不排除有隨時被對方超越的可

能。

手機版網頁設計注意事項

用手機上網時,有些 會無法正常顯示,因為這些網頁是設計在電腦上看的,如果網頁開發者沒有考慮到手機的軟硬體特性以及人們的閱讀習慣,就無法設計出手機上方便閱讀的網頁。說的簡單,但是要把既有網頁砍掉重練 再移植到手機上是一項大工程,筆者歸納四個方面給網頁開發人員參考。一 與計算機共享同一套網頁 這裡的與計...

Hadoop搭建的一些注意事項及解決方法

這兩天實驗室的一哥們在搭建hadoop平台,由於是linux新手,在搭建的過程中遇到各種問題,以至於弄了將近乙個禮拜還沒有搞定,後來叫我去幫忙,花了兩個小時左右終於幫他搞定,裡面的錯誤確實是我之前沒有遇到的,故在此備忘,也希望能幫助到一些新手。主要問題包括 1 環境變數 2 金鑰配置 3 目錄許可權...

設計前沿 初級網頁設計師需要注意事項

很榮幸今天是7月份的最後一天,想想好久沒有總結過自己的工作,那麼今天借這個機會來說一下。初略有幾個方面的內容 一 初級設計師怎麼做好網頁設計。二 初級設計師怎麼與使用者進行溝通 三 初級設計師該怎麼提高自己。一 初學者怎麼做好網頁設計 在網上通常我們會看到很多設計大神的作品,色彩和排版看起來都很舒適...