手机屏幕规格这么多，设计稿应该以哪种规格作为标准规格。 现在已经有2K码率的手机屏幕了。 设计稿不也应该按照最大码率来设计宽度和高度吗？ 其实并不是。
与您分享最流行手机的所有规格和尺寸列表。 值得仔细研究的智能手机规格图表。
详情见右图：
有兴趣的男伙伴可以尝试不同的规格，比如1次、2次、3次。 最终的测试结果是。 H5的设计稿通常设计为640640xx11361136px。 既满足了显示需求，又减少了用户加载图片所需的带宽。
当你用各种联通智能手机查看我们设计的H5页面时，其实也会出现以下情况，内容显示不完整，甚至一些重要的内容和按钮会被遮挡。
第一：背景图片必须用background-size:cover;来实现。
第二：我们在规划设计H5页面的内容时，不要将重要的内容放得太低或太高，否则在后端布局时内容可能无法完全显示。
通过比较，我们可以得到：
除了浏览器全屏显示的情况外，几乎所有情况都会有底部状态栏和导航栏。
根据iPhone设计标准，状态栏和导航栏的单个像素高度分别为40px和88px。
因为Android系统可以修改状态栏和导航栏的高度，所以这里默认值可以是48px和100px（这个规范可以在网上找到）。
这样就会把网页的内容往下挤压，踩进盲点（根据不同的布局形式，该层可能会被挤出，即在可见区域下面）。 这两个系统的最大值为148（48+100），如右图5所示。 设计稿应尽量保证单页底部没有重要内容。
图5
这样一来，想要在所有屏幕尺寸上充分显示重要内容，就必须关注市面上的小尺寸手机屏幕。 现在大多数智能手机的比特率都在640640xx960960px（iPhone4比特率）以上，所以只要将重要内容放在上图5盲点上方即可。 预计最安全高度为 812 (960-148=812)。
综上所述，一般情况下，现有市场流行的联通智能手机，单页翻页（不向上延伸的长页）规格为640x1136，安全线（参考线）设置为高度为812。将重要内容布局在此安全线上方。
中国联通终端H5页面设计稿规格及尺寸规格如下：
1. 像素没有宽度或高度（不要被Photoshop中的像素网格误导），它仅代表采样的颜色值。
2、任何图片作为数据信息保存在存储盘中时，只有宽度和高度图像质量数字才有意义。 这时ppi对于图片来说已经没有任何意义了，它无法描述图片的长短或长短。 高度，只有被复制后，才有ppi的含义。 只有复制后才能描述图片的高度和宽度。
3、制作H5页面时设计原型时，产品总监的原型建议屏幕宽度为320px。 这个规范是为了方便浏览而使用的（现在很多手机的屏幕宽度达到了1440px，用这个规范来模拟不太现实），
其次，基于iPhone5s的手机屏幕宽度比较小，在做内容布局时要向上兼容屏幕宽度。
4、设计者在制作设计稿时，应将原型稿上的所有规格加倍。 这样html5尺寸，设计稿在联通设备上的预览就可以保证清晰。 切割后端时，按照目前流行的做法，可以直接使用原型稿上的规格，即设计稿的1/2。
5、正常情况下，H5页面设计稿为640640xx11361136px，这是最稳定的规格。 812px高度处降低一条安全线html5尺寸，重要内容在此线之上（网上有文章说安全线在960px，我个人认为准确）。 既保证了联通设备上的清晰显示，又保证了素材的最小尺寸。
发表评论