当我们在为移动终端设计H5网页设计草案时(当然也包括微信终端的H5网页设计)，如果我们没有做过类似的移动设计，用户界面设计师和前端工程师肯定会很纠结。如果你是一个应用程序设计师，你就不会这么矛盾了。

　　有这么多屏幕尺寸，哪一个应该是设计草案的标准尺寸？现在我们有了一个2K分辨率的屏幕，我们需要设计最大分辨率的宽度和高度。显然不是。

　　请注意，在以下所有讨论和规范中，视口都设置为内容=宽度=设备宽度

　　元内容=初始比例= 1.0，用户可缩放=否，最大比例= 1，宽度=设备宽度名称=视口/>

　　元内容=电话=无名称=格式-检测/>

　　根据手机移动终端的当前市场，统计其设备的单个像素。

　　在这里，25所学校也与你分享一份目前最流行的手机规格的所有尺寸列表。

　　只有iPhone6+有分辨率和频率降低。

　　感兴趣的伙伴可以尝试不同的尺寸，如1、2、3次。实验的最终结果是。H5的设计草案通常是640x1136px像素。它不仅满足了显示要求，而且减少了用户加载图像所需的带宽。

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

　　首先:背景尺寸:背景图像必须使用封面；实施。

　　第二:当我们在规划H5页面内容的布局时，我们不应该把重要的内容放得太低或太高，否则前面的布局可能会显示不完整的内容。

　　相比之下，我们可以得到:

　　除了当浏览器以全屏显示时，几乎所有的情况都会在顶部有一个状态栏和导航栏。

　　苹果手机、状态栏和导航栏的设计标准分别是40px和88px。

　　由于安卓系统可以改变状态栏和导航条的高度，默认值是48px和100px(两者都可以在线获得)。

　　这将内容向下挤压到一个盲区(它可以根据布局挤压出视口)。将这两个系统的最大值设为148 (48+100)，如下图5所示。尽量确保在设计草案的一页下面没有重要的内容。

　　如果你想在所有屏幕上显示重要内容，你需要注意市场上的小手机屏幕。大多数智能手机现在的分辨率为640x960px (iPhone4分辨率)，所以只需将重要内容放在上面图5的盲点之上。计算出的最大安全高度为812 (960-148=812)。

　　综上所述，总的来说，随着目前市场上流行的移动智能手机，单页翻页(非扩展长页)的设计草稿大小为640&倍。在高度812处设置一条安全线(参考线)，将重要内容放置在这条安全线上。

　　手机H5页面设计草案尺寸规格如下:

　　1.像素没有宽度和高度(不要被Photoshop中的像素格所迷惑)，它们只代表一个采样的颜色值。

　　2、任何图像作为数据信息被存储在存储盘中那是有意义的只有宽高的数字，此时的ppi对于图片来说没有任何意义，也不能描述图片的宽度或高度有多少英寸，而只有在被打印出来之后才有ppi的意义，被打印出来才能描述这张图片有多高就有多宽。

　　3、通常用H5的页面设计制作原型，产品经理的草图建议屏幕的原型为320 px宽，使用这个尺寸是一种浏览方便(现在很多手机屏幕的宽度为1440 px，使用这个尺寸来模拟显然不现实)，其次是iPhone5s对于标准手机的屏幕宽度来说很小，内容布局的屏幕宽度应该是向后兼容的。

　　4.当设计草图时，设计者应该将原型草图上的所有尺寸加倍。这样，可以在移动设备上预览设计，以确保清晰。在对前端进行切片时，根据流行的做法，您可以直接使用原型草图的大小，即设计草图的1/2。

　　5.一般来说，640x1136px像素是H5页面设计草案中最安全的尺寸。在812像素的高度加一条安全线，重要内容在这条线以上(网上有些文章说安全线是960像素，我觉得不准确)。它不仅确保了移动设备上的清晰显示，还确保了材料的最小尺寸。