導航:首頁 > 萬維百科 > wap網頁設計尺寸

wap網頁設計尺寸

發布時間:2021-03-04 21:50:26

1、wap網頁製作,wap網頁標准大小是多少?

240*320和176*164.通用

2、智能手機的網頁設計尺寸多大為佳?

現在的手機網站設計大都會採用百分比,所以不用考慮這個問題了。因為不是所有手機的屏幕大小都是一樣的。【Mcmore手機商城系統】採用行業先進的HTML5技術,與傳統意義上的WAP手機商城不同,使你的手機網店更加接近手機APP界面,界面交互完美而且功能完善。http://www.mcmore.com/ydds/

3、如何製作WAP網站

我也在找這方面的資料呢
http://tech.sina.com.cn/wap/school/index.shtml
看看吧,或許能幫到你的

4、手機端網頁設計尺寸多少

iPhone手機網頁的設計尺寸

iPhone5尺寸是640x1136px解析度是326PPI
iPhone4和iPhone4S尺寸是640x960px解析度是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px解析度是163PPI

安卓網頁的設計尺寸

320dp:一個普通的手機屏幕(240X320,320×480,480X800)
480dp:一個中間平板電腦像(480×800)
600dp:7寸平板電腦(600×1024)
720dp:10寸平板電腦(720×1280,800×1280)

ipad網頁的設計尺寸

iPad第三代第四代尺寸是2048x1536px解析度是264PPI
iPad第一代第二代尺寸是1024x768px解析度是132PPI
iPad Mini尺寸是1024x768px解析度是163PPI

5、手機前端頁面尺寸

iPhone4/iPhone4s
320
*
372
/
320
*
441
(已隱藏URL與狀態欄)
iPhone5/iPhone5s
320
*
460
/
320
*
529
(已隱藏URL與狀態欄)
Note2
360
*
567
(未隱藏URL與狀態欄)
iPad
3/4
768*928
(未隱藏URL與狀態欄)
GALAXY
SIII
360
*
567
(未隱藏URL與狀態欄)
小米2A
360
*567
(未隱藏URL與狀態欄)
HTC
G10
320
*
460
<meta
name="viewport"
網頁手機wap2.0網頁的head里加入下面這條元標簽,在iPhone的瀏覽器中頁面將以原始大小顯示,並不允許縮放。
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
width
-
viewport的寬度
height
-
viewport的高度
initial-scale
-
初始的縮放比例
minimum-scale
-
允許用戶縮放到的最小比例
maximum-scale
-
允許用戶縮放到的最大比例
user-scalable
-
用戶是否可以手動縮放
參考:http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
一、網頁手機wap2.0網頁的head里加入下面這條元標簽,在iPhone的瀏覽器中頁面將以原始大小顯示,並不允許縮放。
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
其中:
width
-
viewport的寬度
height
-
viewport的高度
initial-scale
-
初始的縮放比例
minimum-scale
-
允許用戶縮放到的最小比例
maximum-scale
-
允許用戶縮放到的最大比例
user-scalable
-
用戶是否可以手動縮放c
二、關於meta的詳細介紹請參考
三、下文是關於Meta的例子的詳細介紹
原文地址
3.
Meta元素可視區
默認情況下,iPhone上的Safari會象在大屏幕的
桌面瀏覽器那樣顯示你的頁面,寬度達到了980像素,然後縮小內容以適應iPhone的小屏幕,因此用戶在iPhone看這個頁面時感覺字體就比較小了,
也比較模糊,必須要放大才能看得真切,對於一個普通的Web頁面似乎可以接受,但對於一個常用的應用程序就沒幾個人能夠受得了。
幸運的是可以使用特殊的Meta元素可視區進行糾正:
<meta
name="viewport"
content="width=device-width"/>
這個元素通知瀏覽器使用設備的寬度作為可視區的寬度,而不是默認的980像素了,我們可以看看兩個不同的例子。
 例3(鏈接:http://www.sitepoint.com/examples/iphone-development-12tips/no-
viewport.html)顯示了一個簡單的段落元素,沒有Meta元素可視區,字體有點模糊。在iPhone中運行的實際情況如下圖所示。

1
無可視區的顯示效果
 例4(鏈接:http://www.sitepoint.com/examples/iphone-development-12tips
/viewport.html)包括了一個可視區元素,現在設備寬度只有320像素,字體也比前一個例子更清晰了。在iPhone中運行的實際情況如下圖
所示。

2
有可視區的顯示效果
 另外,你還可以手動設置device-width的值,例如,假設你的博客頁面的寬度是750像素,那麼桌面屏幕最佳大小就是800x600像素,例
5(鏈接:http://www.sitepoint.com/examples/iphone-development-12tips
/fixed750.html)顯示了一個刪減版本,如果你在iPhone中瀏覽它,你會看到980像素剩下的空間都填充了白色。
為了消除額外的空間,可以使用meta元素可視區將寬度設為780像素:
<meta
name="viewport"
content="width=780"/>
例6(鏈接:http://www.sitepoint.com/examples/iphone-development-12tips/fixed750-viewport.html)顯示了meta元素可視區布局被固定後的效果。
Meta元素可視區的內容可以包括多個逗號分隔的值,如initial-scale

用戶最初看到頁面時的放大級別,對於Web應用程序,一個常見的設置是:
<meta
name="viewport"
content="width=device-width,initial-scale=1,user-scalable=no"/>
這個元素設置寬度為設備的最大寬度,禁止用戶放大和縮小

6、Wap網頁如何設計製作?

1、wap網頁使用WML格式文件設計,WML和HTML類似,所以如果你會HTML的話,設計wap網頁是不版會很難的。
2、WML 指無線權標記語言。它是一種從 HTML 繼承而來的標記語言,但是 WML 基於 XML,因此它較 HTML 更嚴格。
3、WML 被用來創建可顯示在 WAP 瀏覽器中的頁面。用WML編寫的頁面被稱為 DECKS。DECKS 是作為一套 CARDS 被構造的。
4、你完全可以使用.ASP頁面設計WAP網頁,但裡面的格式肯定是要符合WML的。關於WAP網頁的設計製作方法或者說是基礎教程,你可以看看下面「參考資料」中的鏈接地址。

5、 關於WAP網站的建站,你可以看看WAP網站等的相關詞條的網路,說的很清楚的。

6、有時間可以多看看下面「參考資料」中的內容,挺全的。

7、關於wap網站UI設計圖片大小的問題

雙倍問題很好解決啊。
比如樣式里設置30x30,我的圖片做成60x60的
這樣在手機屏里顯示30x30的大小,並且高清。android,iphone皆是如此

8、手機wap網頁框架內載入其他頁面,如何使那些頁面自適應框架的大小?

你的意思是不是"怎麼能讓iframe頁內框架的大小根據在框架內顯示網頁內容,如文字內容等的大小而定?"

如果是這樣的話 有幾段代碼可以幫你:

iframe自適應高度和寬度

方法1

將myframe換成 自己iframe的name即可。

自適應高度高度
<iframe name="myframe" src="myframe.htm" frameborder="0" scrolling="auto" width="100%" height="100%" onload="document.all['myframe'].style.height=myframe.document.body.scrollHeight" ></iframe>

自適應高度寬度
<iframe name="myframe" src="myframe.htm" frameborder="0" scrolling="auto" width="100%" height="100%" onload="document.all['myframe'].style.width=myframe.document.body.scrollWidth" ></iframe>

===============================================================方法2,用javascript動態調整iframe的高度:

這里我提供一個兼容IE/NS/Firefox的javascript腳本實現動態調整iframe的高度。如果需要調整寬度的話,原理是一樣的,本文不加詳述。

首先,在你的主頁面上必須包含以下這段javascript代碼:

<script language="Javascript">
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraHeight=getFFVersion>=0.1? 16 : 0

function dyniframesize(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"

if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
</script>

然後對於主頁面用到iframe的地方添加代碼:

<iframe id="myTestFrameID" onload="javascript:{dyniframesize('myTestFrameID');}"
marginwidth=0 marginheight=0 frameborder=0 scrolling=no src="xxx.htm" width=200 height=100></iframe>

9、手機網頁UI設計尺寸是多少

這個不同手機尺寸不一樣,比如
iphone3 320*480 iphone4 640 * 960
android 240*320 320* 480 480* 854 這些比較常用,還有一些其他解析度
看你具體是針對什麼手機做的了!

10、移動頁面尺寸

<div class="wrap">
<img src="img02.jpg" width="340" height="220" alt="" />
<a href="">按鈕</a>
</div>
<style>
.wrap{position:relative;margin:0 auto; min-width:320px;width:100%;}
.wrap img{width:100%;height:auto;}
a{position: absolute;bottom:20px;right:20px;height:40px;padding:0 20px;line-height:40px;background:#A6DA32;color:#461DCD;}
</style>
在wrap設置相對定位position:relative;然後讓按鈕a絕對定位bottom:20px;right:20px;就可以了 當然也可以用百分百bottom:10%;right:10%;意思就是相對於wrap的右邊多少像素或者百分比,相對於下邊多少像素或者百分比
如果你想更精確的區分移動端和pc端可以用響應式布局代碼判斷

/*PC*/
@media screen and (min-width:960px){
a{bottom:20px;right:20px;}
}

/*平板*/
@media screen and (min-width:600px) and (max-width:960px){

a{bottom:15px;right:15px;}
}

/*手機*/
@media screen and (max-width:600px){
a{bottom:10px;right:10px;}
}

在第一個裡面寫在寬度大於960時候所用的css
在第二個裡面寫想要在寬度大於600並且小於960時候所用的css
在第三個裡面寫你要在寬度小於600時候所用的css
意思是檔瀏覽器大於960的時候a按鈕的屬性是bottom:20px;right:20px;
當你將瀏覽器拉小到960一下600以上的時候就使用bottom:15px;right:15px;
當瀏覽器小於600的時候a按鈕的屬性就是bottom:10px;right:10px;

當然如果想使用響應式布局必須聲明頁頭的
<!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

與wap網頁設計尺寸相關的知識