导航:首页 > 万维百科 > 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网页设计尺寸相关的知识