手机网页界面设计尺寸

1、手机前端页面尺寸

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

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

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

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

4、手机app端6寸屏幕ui用户界面设计尺寸是多少

屏幕大小：指屏幕的物理尺寸，一般用屏幕对角线长度表示，单位英寸。如 5 英寸屏幕。1英寸 = 2.54 厘米。

获知手机屏幕的大小主要有两种方法。注意，虽然提示为“主屏尺寸”，但目前一般的手机辅助类软件并不提供屏幕大小的查询，只提供屏幕分辨率的查询。

方法一：去 ZOL 中关村在线查，输入手机型号搜索即可。（图中，1 处为屏幕大小，2 处为屏幕分辨率）
方法二：用尺量屏幕对角线长度，然后换算成英寸（2.54厘米 = 1 英寸）。

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

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

6、智能手机的网页设计尺寸多大为佳？

现在的手机网站设计大都会采用百分比，所以不用考虑这个问题了。因为不是所有手机的屏幕大小都是一样的。【Mcmore手机商城系统】采用行业先进的HTML5技术，与传统意义上的WAP手机商城不同，使你的手机网店更加接近手机APP界面，界面交互完美而且功能完善。http://www.mcmore.com/ydds/

7、设计手机网站时，一般宽度设计为多少像素?

手机网站最好是用百分比全屏自适用的方式做，那样不管手机是什么分辨率都可以使用。

一般android系统设计的时候可以使用320x480的分辨率进行设计。

苹果手机使用：640x960分辨率进行设计。

8、HTML5移动网页的设计稿尺寸应该是多少

HTML5的移动端网页设计稿，通常情况下，内容区为750px或960px或者1080px的，一般不小于750px像素大小（宽度）
设计稿可以比750px大，但是绝对不能比750px小，这个主要是由于当前手机的分辨率相对较高（iPhone 6是375物理像素，但实际像素为其两倍，也就是750，这个750就是这么来的）
如果设计图稿过小，前端在实现图稿的时候里面的图片大小在高分辨率的情况下会显得模糊不清，所以这也是为何要“大”分辨率
此外需要注意的是，要保证页面的基准字体大小，在320px的设计稿当中，最小字体不宜小于12像素，其他像素的设计稿当中，等比例换算即可（12/320px*设计稿像素值）

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

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模块，这样就可以实现想要的效果了。