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

前沿

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

页面设计稿

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

一般单页面的H5设计稿为640*1136是最为稳妥的，这样可以保证页面的清晰度，还能保证图片不至于太大，减少带宽。
最重要的要在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” />
复制代码

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

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

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

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

移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题
移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题参考文章: (1)移动端页面制作字号大小设定问题,设计稿文字字号规范,解决移动端大小屏适配问题 (2)https://ww ...
楚留香pc端连接服务器未响应,楚留香游戏pc端闪退怎么办_楚留香游戏中pc端闪退解决办法汇总...
楚留香手游的内存相对其他小型游戏来说比较大,所以游戏的过程中容易出现pc端闪退的情况,楚留香游戏pc端闪退怎么办?快啦小编给大家带来楚留香游戏中pc端闪退解决办法汇总. 楚留香游戏中pc端闪退解决办法 ...
移动端根据设计稿宽度适配 px转换相对单位rem
为了计算方便,一般建议 1rem = 100px(设计稿px),要换算这样的比例需要设置html对应的fontSize,计算规则如下: fontSize = 屏幕宽度 / 设计稿宽度 * 基本宽度如 ...
stm32f103插拔pc端的串口引起的问题及解决办法
stm32f103串口和pc端串口进行相连,打印调试信息,插拔PC端的串口后发现程序执行异常,大循环不跑了,一直不停的进入串口接收中断服务程序中.进一步调试发现是触发了中断:USART_FLAG_OR ...
webView加载H5页面出现空白页的解决办法
最近在做一个理财的项目,其中用到的H5页面比较多,在项目后期出现了很多bug,今天介绍下webView加载H5出现空白的解决办法首先介绍下出现问题的场景,我们在一个Activity中镶嵌了一个H5的 ...
ios端h5页面双击页面会发生滚动问题解决办法
在IOS系统中,H5页面双击会引起页面发生向上滚动,以下代码方法解决这个兼容性问题亲测有用,记录一下一.在touchmove的时候进行阻止默认事件 (能解决使用了window添加了scroll滚动后 ...
服务端返回中文乱码的分析和解决办法
一.介绍本文介绍了Controller端,返回json的几个写法和遇到的坑,如遇见中文乱码可以按照下面详细情况介绍换一种方式解决你的问题. 二.前提背景 json格式:FastJson Contro ...
uni-app h5页面左上角出现“取消“字眼解决办法
在项目根目录的index.html中加上一行代码 <link rel="stylesheet" href="<%= BASE_URL %>static/ ...
百度网盘电脑端看视频声音巨小的解决办法（windows10）
我电脑一用百度网盘看视频声音就巨小,不得已每次都得带耳机,真担心我的耳朵受不了. 于是,我开始寻找解决方案,最终俺是这么解决的. 首先,找到电脑底部导航栏的音量键,并右击选择打开音量合成器可以看到当 ...

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

前沿

页面设计稿

前端要做的

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

最新文章

热门文章