网页移动端的设计尺寸是多少合适

1、移动端web在设计时宽度尺寸是多少合适？

首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K屏。近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。
不要被这些尺寸吓倒。实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。
像素密度
要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3.5英寸的。

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

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

3、移动端web在设计时宽度尺寸是多少合适

基本上都是640吧，高度由于是专题，可以不受限制的

4、移动端的h5页面的尺寸是多少

H5的尺寸一般设计为640x1136px

既满足了显示需求，又能降低用户加载图片需要的带宽。

可以用各种分辨率的移动智能手机查看我们设计的H5页面时，当然，也会出现如下的情况，内容显示不全，甚至一些重要内容和按钮都会被遮挡。

第一：背景图片必须采用background-size:cover;来实现。

第二：我们在进行H5页面内容规划布局设计的时候，不能把重要内容放在太偏下的位置或者偏上，否则前端布局时可能出现内容显示不全的情况。

(4)网页移动端的设计尺寸是多少合适扩展资料：

标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁。

为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。

WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

参考资料：网络－HTML5

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、做移动端的设计 以什么尺寸来设计

IOS篇
1、尺寸及分辨率
iPhone 界面尺寸：320x480、640x960、640x1136
iPad 界面尺寸：1024x768、2048x1536
（以上单位都是像素哦，至于分辨率一般网页UI和移动UI基本上都只要 72 ppi）
当然，在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机尺寸来设计，比较方便预览效果，一般用 640x960 或者 640x1136 的尺寸设计。
P.S. 作图的时候确保都是用形状工具（快捷键：U）画的，这样更方便后期的切图或尺寸变更~
2、界面基本组成元素
iPhone的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏以及中间的内容区域
这里取用 640x960 的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸：
状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40 px
导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮，其高度为：88 px
主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98 px
内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的，其高度为：734 px

iPhone/iPod Touch
第一代、第二代、第三代

iPhone4/iPhone4s

iPhone5/iPhone5C/iPhone5s
至于我们经常说的 iPhone5/5s 的 640x11136 的尺寸，其实就是中间的内容区域高度增加到：910 px
P.S. 在最新的 iOS7 的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起，但是再怎么变化，尺寸高度也还是没有变化的，只不过大家再设计 iOS7 风格的界面的时候多多注意一下~

3、字体大小
iPhone 上的字体英文为： HelveticaNeue 至于中文，Mac下用的是黑体-简，Win下则为华文黑体。
下图是百度用户体验做过的一个小调查，可以看出用户可接受的文字大小，像素为单位，也就是大家在PS里的文字像素大小。

P.S. 多留心下一些大公司的数据研究，你会发现很多你根本没考虑到的问题

Android篇
1、尺寸及分辨率
Android 界面尺寸：480x800、720x1280、1080x1920... （单位：像素）
Android 比 iPhone 的尺寸多了很多套，建议取用 720x1280 这个尺寸，这个尺寸 720x1280中显示完美，在 1080x1920 中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。

7、移动端美工画布设计尺寸多少合适

网页尺寸：
淘宝是990（950）宽*任意高，要是自己或者企业的话，这个你随便定，一般宽度是在950-1200之间
手机尺寸：
淘宝620（480）宽*任意高，要是自己或者用其他软件的话请参考软件的要求。

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

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