當前位置:首頁 » 網頁前端 » 手機web頁怎麼兼容所有的屏幕
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

手機web頁怎麼兼容所有的屏幕

發布時間: 2023-01-08 22:42:52

⑴ 手機web頁製作怎麼兼容所有屏幕

一、目前主流手機屏幕寬度列表:
128、176、240、320、360、480、640幾種
二、研究對象:
諾基亞、三星、索愛、摩托羅拉、黑莓、聯想、天語、蘋果
三、各品牌各屏幕寬度所佔比例:

四、結論:
由以上表格可以結論:
1. 主市場上主流手機屏幕寬為240px,在總體市場上佔59%,不必多說,此中手機一定是我們的主要客戶來源。
2. 以屏幕寬度為480px的手機為發展趨勢,在總體市場佔9.3%,雖然該種機型占市場份額不大,但是各大品牌都有所涉及,而且只會出現有增無減的趨勢,將來一定會取代屏幕寬為240px的主導地位。
3. 屏幕寬度為320px、360px的手機是發展大屏手機時期的過度型號,在總體市場上屏幕為360px的手機所佔份額明顯高於320px的。
4. 屏幕寬度為128px的手機占市場9.9%,一般為早期機型,大多不支持wap2.0頁面。
5. 屏幕寬度為640px的超大屏幕手機占市場份額為1.7%左右,一般為多媒體和高端機,而且根據市場行情,大屏幕手機越來越受到用戶的喜愛,所以在不久的將來,該類型的機型一定會佔有一席之地。

五、建議:
1.舍棄屏寬為128px和176px的手機,wap北京網站製作可以覆蓋83.3%的市場。原因:此種用戶普遍收入偏低,不大可能成為服務對象。
2.鑒於市場上手機屏寬設定沒有統一的標准,手機屏幕各式各樣,手機屏幕寬度差距較大,為了防止大屏幕手機用戶上頁面顯示嚴重變形,建議做成以240px為標准向上兼容320px或者以360px為標准向上兼容。

二、wap1.0和wap2.0區別
限制是手機本身的問題,每個手機的圖片 鈴聲,java程序等文件的大小都有不同的限制,和wap版本無關。
wap 應用版本在手機上1.0 和2.0區別主要是應用功能的兼容,1.0因為有許多局限,現在幾乎所有的手機都是wap2.0瀏覽器,如果是1.0瀏覽器,會有許多wap功能無法使用。下載文件限制主要取決於手機本身,版本的問題主要會體現在----用低版本瀏覽器瀏覽高版本wap高端網站建設會有部分功能無法實現。wap2.0好像還沒有解決完全向下兼容的的問題。
WAP1.0版本是WAP的第一個版本,在1998年夏被通過。這一版本推介出了WAP的核心內容、i.e.WAP協議條款、WML以及WMLScript等
WAP1.1版本於1999年夏推出,這是1.0版本的改良版,是對以前的版本進行歸納反饋的結果。1.1版是第一個商業版,在這一版本中的主要變化仍然是用XHTML對WML進行編排以得出W3C的詳細說明。這一版本支持WBMP格式的圖像操作,從而提高了無線電話應用(WTA)-規格及WML的所有標記,現在它已用小寫取代了大寫。
WAP1.2版本現已被通過,這一版本採用了WAP推進架構、用戶代理結構(UAPROF)、WDP通道、提高無線電話應用(WTA)規格以及包括支持附加的用戶網路技術。
現在最新的就是wap2.0
WAP2.0是為加強WAP的實用性而設計的,迎合了市場的需求,並且適應了當前更高帶寬、更快的數據傳輸速度、更強大的接入能力和不同的屏規格大小等最新的行業發展趨勢。利用先進的網路和新增的服務功能,支持WAP2.0的終端將可以接入到各種基於互聯網的內容、應用和服務,我們也可以將這視為從PC非常有價值的一個擴展。
WAP2.0採用與互聯網採用完全通用的協議,可通過手機直接登錄互聯網,而基於WAP1.2技術卻只能登錄WAP門戶。同時WAP2.0特有的直接HTTP通信、移動友好技術、標記語言XHTMLMP以及對WML1.0的完全向後兼容等技術也使得WAP2.0能有更好的圖形展現及控制能力;更容易針對不同的終端作出相應的內容優化;能夠無線傳送流媒體;使用緩存,業務處理速度更快;對大型文件的下載也更加迅速。WAP2.0將真正實現手機與互聯網的無縫連接,使手機成為一台微型電腦終端。
WAP2.0中採用了各種新技術以增強業務性能,其中包括:數據同步、多媒體消息服務(MMS)、永久存儲介面、預配置(Provisioning)、和圖形符號傳送(Pictograms)等。另外、WAP2.0還在以前版本的基礎上對無線電話應用(WTA)、Push、和用戶代理輪廓(UAPROF)作了進一步完善。
對於數據同步,WAP2.0採用了SyncML協議以保證為多種設備提供一個通用解決框架。無線會話協議WSP和HTTP/1.1協議均可支持SyncML語言。
永久存儲介面提供了一組存儲服務及完整定義的介面,允許用戶在無線設備或者其它已連接的內存設備上組織、訪問、存儲、提取數據。
預配置(Provisioning)特性允許網路操作員利用一個通用工具包管理其網路上的設備。同時該服務提供一個標準的方法為WAP客戶提供其在無線網路中操作所需的信息(比如WAP網關的IP地址等等)。
圖形符號傳送(Pictograms)特性允許用戶使用微型圖形 (tiny images),例如。這樣的圖形可以用於更簡潔地表達意思,使用戶能夠更有效地進行通信
除了如WBMP圖像,vCard和vCalender。這些WAP1.2中已經規范的內容。在WAP2.0中的,還增加了一些新的特性: WAP2.0中使用的基本標記語言為WML2,是基於W3C定義的XHTML的基本輪廓編寫的。WAE通過定義了用於增強功能的附加標記特徵,及對WML1語言的前向兼容,進一步提高了該語言的可擴展性。WML2使用了XHTML的模塊化方式,允許按照需要增加語言元素。而且,使用XHTML核心基本語言編寫的文檔,完全可以在WML2瀏覽器中運行。 WAP2.0中還支持style sheet加強了內容顯示能力。WAP同時支持目前絕大多數Internet瀏覽器都支持的inline and external style sheets。 WAP2.0版本包括一個使用eXtensible Stylesheet Language Transformation (XSLT)的轉換機制,可以允許將WML1語言的文檔轉換成為WML2編碼,這樣就可以在WML2瀏覽器中運行WML1的文檔了。 這些變化使客戶可以訪問為其他Internet客戶和應用編寫的XHTML內容,同時也可以訪問使用擴展WML特性而特殊編寫的內容

⑵ 移動端Web頁面適配方案(整理版)

@(概述)[基本概念|百分比|rem|vw/vh|響應式設計]

移動端web頁面的開發,由於手機 屏幕尺寸 解析度 不同,或者需要考慮 橫豎屏 問題,為了使得web頁面在不同移動設備上具有相適應的展示效果,需要在開發過程中使用合理的適配方案來解決這個問題。

早期網頁設計採用 靜態布局 ,通過 <meta> 標簽中的 applicable-device 應用設備標識識別移動設備,即 <meta name = 'applicable-device' content = 'mobile'> ,在 <meta> 標簽中的 viewport 標簽中設置 width ,通過 js 動態修改標簽的 initial-scale 使得頁面等比縮放,剛好占滿整個屏幕。一些文章中有提到靜態布局中頁面各個元素採用 px 為單位,這種方案實現簡單,不存在兼容性問題,但用戶體驗很不友好。

後面出現 流式布局 ,使用百分比 % 定義寬度,高度使用 px 固定,根據可視區域大小實時進行尺寸調整,通常使用 max-width/min-width 控制尺寸范圍過大或者過小。這種方案實現比較簡單,但在大屏手機或橫豎屏切換場景下可能會導致頁面元素被拉伸變形,字體大小無法隨屏幕大小發生變化。

順應不同頁面字體大小展現問題,出現了 彈性布局 。這種布局方案下,包裹文字的元素的尺寸採用 em/rem 為單位,頁面主要劃分區域的尺寸依據情況使用 px 、百分數或者 em/rem 。如一些高校的網站 jlu ,頁面的主要劃分區域使用 px 和百分比,包裹文字的元素和文字採用 em 。

上面的這幾種方案下,頁面元素的大小按照屏幕解析度進行適配調整,但是整體布局不變,對於 響應式web設計 ,網頁布局會隨著訪問它的視口及設備的不同呈現不同的樣式,在實現上可能會以上多種方案的結合,同時搭配 媒體查詢 技術使用,使得一個頁面在多個終端 (PC, mobile, pad) 呈現滿意效果,如 mashable 。

[TOC]

像素,是屏幕上顯示數據的最基本的點,表示相對大小。不同解析度下相同長度的 px 元素顯示會不一樣,是因為像素點的個數相同情況下,不同解析度下每個像素點對應的像素寬度不同。比如同樣是 14px 大小的字,在 1366×768 顯示屏下會顯示的小,在 1024×768 顯示屏下會相對大。也稱為 物理像素(設備像素 ),是解析度的尺寸單位。

印刷行業常用單位,能夠使用測量設備測得的長度,等於 1/72 英寸。

在不同屏幕上, css 像素呈現的物理尺寸一致,但 css 像素對應的物理像素具數不同。標準的顯示密度下, 1 個 css 像素對應一個物理像素,縮放時, 1 個 css 像素對應的物理像素會減增。是一種 設備獨立像素(device independent pixels: DIPs)

像素密度,每英寸所擁有的像素數。值越高,顯示畫面細節越豐富。計算公式為: ,其中 和 是解析度的寬高, 是屏幕尺寸。

列印設備每英寸印刷出來的點有多少個,值越高,圖片越細膩。

設備物理像素和設備獨立像素比 ,即 是指在理想布局寬度,使用多少個物理像素來渲染一個css像素。js中通過 window.devicePixelRatio 獲取,css中通過 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 進行媒體查詢。

<meta> 標簽中定義了一些元數據信息,通過設置 <meta name = "viewport"> ,提供有關 視口初始大小 的信息,供 移動設備 使用。屬性值為

移動端涉及 布局視口 (Layout Viewport)、 視覺視口 (Visual ViewPort)和 理想視口 (Ideal ViewPort)。

與移動端web頁面適配有關的手機屏幕特性包括

硬體所支持的,屏幕每行的像素 * 每列的像素點數,單位是 px 。

設備獨立的,軟體可以達到的,個人理解是使得軟體/頁面在不同屏幕上顯示出來的效果一致。

像素解析度 ÷ 邏輯解析度等於 倍率 ,如 @3x 表示解析度的 3 倍。一個已知物理像素大小的元素,如果在普通屏中其設備像素等於 css 像素,但在一些高清屏中,如 Retina 顯示屏,一個css像素對應 2 或 3 個設備像素,這時顯示出來的元素會變小。為了讓元素如期待顯示,需要傳入 原始設計稿尺寸 × 倍率 的設計稿,根據 DPR 的定義,這樣載入後能夠達到同樣的效果。

手機屏幕對角線長度換算成英寸的大小

貼上 源碼 分析

視口 是瀏覽器中用於呈現網頁的區域,移動端的視口通常指的是 布局視口

使用 css 預處理器把設計稿尺寸轉換為 vw 單位,包括 文本 布局高寬 間距 等,使得這些元素能夠隨視口大小自適應調整。以 1080px 設計稿為基準,轉化的計算表示為

響應式設計 使得一個網站同時適配 多種設備 多個屏幕 ,讓網站的布局和功能隨用戶的使用環境(屏幕大小、輸出方式、設備/瀏覽器能力而變化),使其視覺合理,交互方式符合習慣。如使得內容區塊可伸縮與自由排布,邊距適應頁面尺寸,圖片適應比例變化,能夠自動隱藏/部分顯示內容,能自動折疊導航和菜單。

⑶ 在手機上如何設置兼容性視圖

在圖庫裡面即可設置。

兼容性視圖是微軟為了兼容基於其它網頁標准開發的網站,確保廣大互聯網用戶在瀏覽網頁時不至於受困於網頁顯示混亂的問題,而專門為IE8增加的一項實用功能。當IE8檢測到某網站不兼容時,地址欄右側就會出現兼容性視圖按鈕,只需輕輕一點,大部分網頁顯示就會正常了。IE9及以上版本也有這個功能。

單擊菜單「工具→兼容性視圖設置」,在打開的窗口中勾選「在兼容性視圖中顯示所有網站」選項,保存設置即可。您也可以選在「在兼容性視圖中顯示 Intranet 站點」,然後將某些不兼容IE的網站添加到該列表,以後訪問這些網站的時候,便可自動啟用「兼容性視圖」。

如果使用的是360,獵豹等瀏覽器,就會發現和IE不一樣,工具欄上沒有"兼容性視圖"的按鈕,這時大家可以按F12鍵,在彈出的「開發人員工具」中選擇兼容性視圖。

⑷ 手機web版的頁面(html/css)怎麼兼容所有瀏覽器和各個手機屏幕解析度

你說的這個問題,應該算的上是手機適配的問題!

既然是手機web端頁面,這里的尺寸應該指的是瀏覽器的可視區域!

同樣是5寸屏,一些有問題一些木有問題。

那他們的不同點就在於瀏覽器的可視區域不一樣。

針對這類極小部分的適配問題。可以通過。css適配做出適當調整:

//手機瀏覽器是這個最大區域(可視區域375px)時,應用這個裡面的樣式
@mediascreenand(max-height:375px)
{

}
//手機瀏覽器是這個最小區域(可視區域375px)時,應用這個裡面的樣式
@mediascreenand(mim-height:375px)
{

}
//手機瀏覽器是這個最大區域(可視區域375px)介於345-75時,應用這個裡面的樣式
@mediascreenand(mim-height:375px)and(mim-height:775px)
{

}

具體你可以參考這個:

http://www.ibm.com/developerworks/cn/web/wa-cssqueries/

⑸ 手機web頁製作怎麼兼容所有屏幕

INTVAL2 不變。 hh.i = 10;

⑹ 如何實現webview 上網頁能進行自動適應手機屏幕大小

stackoverflow 上做法:
webSettings.setLoadWithOverviewMode(true);
webSettings.setUseWideViewPort(true);覺得這個好用