微信H5整图背景适配方案

微信H5页面的全屏背景图，建议设计尺寸：800px*1440px，ratio=1.8

找了几部不同屏幕尺寸的手机，ratio表示长宽比：

1、iPhone6s:  750*1206，ratio=1.608，标题栏高度：128
2、华为1：     800*1430，ratio=1.788，标题栏高度：260
3、华为2：     784*1458，ratio=1.860，标题栏高度：142
4、华为3：     720*1352，ratio=1.878，标题栏高度：248
5、iPhoneX：750*1448，ratio=1.931，标题栏高度： 176

建议设计尺寸：
800*1440，ratio=1.8

若按此尺寸设计，body全屏背景：

body {background-image: url(configs/bg.jpg);background-repeat: no-repeat;background-size: cover;background-position: center center;position: relative;
}

手机1会上下截掉5.33%；
手机2会上下截掉0.33%；
手机3会左右截掉1.66%；
手机4会左右截掉2.07%；
手机5会左右截掉3.38%；

结论

建议设计尺寸：800*1440，ratio=1.8
主视觉元素，放在padding 5%以内。

微信H5整图背景适配方案相关推荐

解决在微信 H5 页面 background 背景图显示不出来
最近做了个项目是在微信运行H5页面,背景是加在body上的页,在微信上打开背景图一闪而过,而用手机自带的浏览器打开又是正常的,在网上查了好多方法都不行. 之前是用的是:background-size: ...
Unity分辨率适配方案设置
有关适配问题官方文档的连接,有兴趣的小伙伴可以查阅一下. Anchors:https://docs.unity3d.com/Manual/UIBasicLayout.html CanvasScaler ...
微信iOS多设备多字体适配方案总结
一.背景 2014下半年,微信iOS版先后适配iPad, iPhone6/6plus.随着这些大屏设备的登场,部分用户觉得微信的字体太小,但也有很多用户不喜欢太大的字体.为了满足不同用户的需求,我们做 ...
微信小游戏屏幕适配方案
首发于我的个人博客-微信小游戏屏幕适配很久没有发文了,最近一直在研究微信小游戏,屏幕适配问题真的是哪里都存在. 无奈论坛资料及可行的解决方案还是太少,还是得靠自己. 且来看一看在微信上如何达到适配多 ...
h5响应式布局、PC和移动端适配方案
前言春招真的是太卷了,让我怀疑春招到底在招谁(是我太菜惹qaq).总之还是不能松懈下来,总结一下在实习期间遇到的h5的响应式布局.PC和移动端适配方案的选择以及一些问题.本文部分文案由chat-gp ...
微信小游戏开发之CocosCreator多分辨率场景适配方案
主题 Cocos Creator不同手机分辨率的背景图像和场景内容适配特别说明 CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上,记录一些重点内容,以及对官方文 ...
python天气查询小程序加背景图_微信小程序开发背景图显示功能
这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image只能 ...
html动态图片怎么设背景,微信8.0状态背景视频怎么设置？状态视频动态背景图设置教程[多图]...
微信8.0状态背景视频怎么设置?许多人可能都还并不是很了解微信8.0的我的状态功能要怎么设置动态的视频作为背景图.现在就让小编为各位分享,微信8.0状态背景视频设置教程. 微信8.0状态背景视频怎么设 ...
解决方案：h5网页外部浏览器唤起微信分享，唤起微信面板，分享朋友圈方案，兼容大部分浏览器
h5网页外部浏览器唤起微信分享,唤起微信面板,分享朋友圈方案,兼容大部分浏览器需求是点击分享按钮,直接唤起微信,发送给好有或者朋友圈.这个需求并不好完成,因为微信并没有对h5网页开放api,但是每个 ...

微信H5整图背景适配方案

结论

微信H5整图背景适配方案相关推荐

最新文章

热门文章