移动端H5设计稿的问题与解决办法汇总

前沿

就目前来看，移动端的H5是目前的一大趋势，毕竟就目前来说手机占据的极大的市场，人们每次都会在空闲时刻拿起自己的手机浏览网页，应用以及各种内容，但是针对于各种不同的手机长宽比以及分辨率是不同的，如何能够在不同的手机上使页面显示相对一样，除了我们程序员做好相应的兼容之外，那么设计师在做设计稿的时候应该怎么办呢？

页面设计稿

1. 制作设计稿一般要在原型上进行2倍的处理，防止出来的设计在手机上展示不清晰，在前端进行书写的时候，直接写成原型稿的大小，让图片压缩成原来的1/2，这样显示是没有问题的。

2. 一般单页面的H5设计稿为640*1136是最为稳妥的，这样可以保证页面的清晰度，还能保证图片不至于太大，减少带宽。
3. 最重要的要在812px高度的地方增加一条安全线，重要的内容要放置在安全线之上。这里给大家一个测试安全线的地址。

点击即可预览

手机扫描二维码也可预览

看了这个估计还是放在960处比较靠谱，不然页面中东西放不了多少很尴尬。

电脑中显示外貌

手机中显示外貌

通过对比可以发现，这个安全线的位置，可以设置在960的位置即可，然后大家通过手机再进行测试一下，看看这根线会超出手机屏幕么？其实这就是为了避免下面的内容会看不见，大家也能看到就是因为顶部状态栏以及微信的导航栏导致的这部分问题。

前端要做的

页面代码中必须包含

<meta content=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width” name=”viewport” />
<meta content=”telephone=no” name=”format-detection” />
复制代码

1. 背景的图片我们必须要使用background-size:cover来实现，有关于img和background的区别请自行搜索。cover主要是用来把背景图像扩展到足够大，使其完全覆盖背景区域。
2. 进行页面规划的时候，不应该把重要内容放在太偏下或者太偏上，否则布局会紊乱。
3. 一般进行定位在H5页面中都用top，尽量不要top以及bottom一起用，目前苹果X出来了，如果按照屏幕底部布局以及顶部布局结合来，会出现你意想不到的效果。
4. 页面中具体的定位内容就切出元素进行排版定位即可，背景图就起到一个背景的作用。

最后，估计大家伙都知道的图片在线压缩工具给推荐一波，tinypng网址tinypng.com/，没有之一，相当好用，减少带宽。

最后，如果文章中有什么不对的或者需要更正的还望指出，感谢！第一时间更改更新。复制代码