导航:首页 > 万维百科 > ios主流手机网页设计尺寸

ios主流手机网页设计尺寸

发布时间:2021-03-30 14:05:53

1、手机端网页设计尺寸多少

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

2、有谁知道手机网页设计尺寸。

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
以上是移动端的尺寸,单独的如果某一个移动的网站的尺寸是没有的,因为移动网站的一半情况是按照%比的尺寸 来自动适应屏幕的大小,或者也通过设置,iphone执行什么尺寸,安卓情况执行什么尺寸的。

3、手机网页设计多大好?

wap页面设计一般都是宽度自适应的,最窄以兼容320px为标准,最宽1280px为标准,
一般的智能手机宽度都是320,480,640这些,
其中iPhone就不用说了吧,必须是480px,
其他三星啊,htc啊什么的,各类分辨率都有,基本不会比480低,
但是之前刚开始的一些智能手机大部分都是320,所有要兼容320哦~~~

4、iOS界面设计尺寸和分辨率有哪些

1、目前苹果手机的尺寸及分辨率
iPhone界面尺寸:320*480、640*960、640*1136、750*1334、1080*1920等。
iPad界面尺寸:1024*768、2048*1536等。
单位:像素72dpi,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计。
Ps:作图的时候确保都是用形状工具(快捷键:U)画的,这样更方便后期的切图或者尺寸变更。
2、界面基本组成元素
iPhone的app界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏、内容区域。
640*960的尺寸设计下这些元素的尺寸。
· 状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px
· 导航栏:显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,其高度为:88px
· 主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98px
· 内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁,其高度为:734px

希望能给你帮助,另外你可以到百度文库搜索相关关键字,相信会有你的资料。

5、做手机界面设计的尺寸是多少

从设计方面来看,做手机界面设计的尺寸一般分为iPhone和Android两种设备。

如果以iPhone为设计设备,尺寸一般是使用750x1334,1125 x 2436,1242 x 2208这三种尺寸设计都可以,750x1334是2倍图设计,1125x2346和1242x2208都是3倍图来进行设计。

如果是用PS做设计稿就用750*1334,如果是用SKetch或者XD来设计,常见是用1倍尺寸来说,也就是375*667或者375*812(iPhone X)。

如果以Android为设备进行设计,尺寸一般使用720x1280,1080x1920进行设计第一种是2倍图,第二种是3倍图。

近年来iPhone和Android的设备增多,各尺寸也逐渐变多,下面有一份安卓屏幕尺寸表:

以及一份iOS屏幕分辨率和尺寸表:

(5)ios主流手机网页设计尺寸扩展资料:

1、UI界面设计的基本要素:

机界面层级: idle(待机界面) Mainmenu(主菜单) Submenu(二级菜单)Third level menu(三级菜单) 界面除了包括图标和文字外,比较重要的还有function animation(呼叫,发送信息等) 以及 function interface(计算器,日历界面等)

明确意义的图标,风格鲜明的版面设计是手机界面设计的重要工作,较为流行的是以Motorola,Nokia等为代表的欧洲简单风格,以及韩国的时尚绚丽的风格。

2、设计注意事项:

尺寸问题: 480X800,540X960,720X1280,1080X1920象素尺寸是较常见的手机屏幕尺寸,在设计时可以根据实际产品要求进行设计,更大的屏幕可以有更多的交互表现和视觉元素的支持,较为自由。

色彩问题: 由于手机lcd本身的限制,在色彩的还原程度上没有pc如此完善,因此在选用色彩时要根据使用的屏幕进行调节。

可实现性问题: 受到硬件运算速度和内存的影响,以及不可预计的后台程序开发难度,过于复杂的效果将很难进行实现,与程序工程师和ui工程师,硬件工程师的沟通显得尤为重要。

6、手机前端页面尺寸

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"/>
这个元素设置宽度为设备的最大宽度,禁止用户放大和缩小

7、手机网页UI设计尺寸是多少

这个不同手机尺寸不一样,比如
iphone3 320*480 iphone4 640 * 960
android 240*320 320* 480 480* 854 这些比较常用,还有一些其他分辨率
看你具体是针对什么手机做的了!

8、做手机网页要考虑哪几种尺寸呀

1、如果是比较复杂的页面,我们只需要第一屏撑满全屏,可以使用此方法。单独定义html和body的样式。【html,body{width:100%;height:100%;}】。

2、然后给DIV添加嵌套样式【.bg{width: 100%;height: 100%;background: #ff0000;}】并在DIV中引入bgCSS【<div class="bg"></div>】保存页面后可以看到此时div也撑满屏幕了。

3、为了方便观察,我们在添加一个不同颜色的DIV【<div class="content"></div>】并定义CSS【width: 10rem;height: 5rem;background: #ffea00;】。保存后网上滑屏,可以看到后添加的DIV也可以正常显示啦。

4、在浏览器开发者模式下,可以切换手机的型号,不同型号手机屏幕比例是不一样的哦,可以看到,从普通的16:9的屏幕切换到iphone7时,屏幕虽然变长了,但是下面的黄色div是不会显示出来的。

5、切换到最新的全面屏iphoneX时,依然是红色的div撑满全屏的。

6、上滑屏幕后才会看到下面的其他div模块,这样就可以实现想要的效果了。

与ios主流手机网页设计尺寸相关的知识