碰到个小程序兼容问题,求教

2020-03-25 12:19:31 +08:00
 nbin2008
描述:1,设计稿 750*1334,标准 iphone6 尺寸 2,全背景图,有定位的元素,如果 logo 和 title 这些

伪代码:

<view class='t1'> <view class='t2'></view> <view class='t2'></view> </view>
目前:

方案 1:t1 高度固定 1334rpx,t2 按设计稿尺寸宽高定位,适配 iphone6 机型,背景图和定位的元素也没问题,但是在 iphonex 上,底部会空出一截

方案 2: t1 高度 100vh,t2 按设计稿宽高定位,页面展示差异很大

有没有好的解决方案呀
(之前发同样问题帖子在微信类别下,再发一帖到程序员类别下,打扰了)
1222 次点击
所在节点    程序员
6 条回复
si3ren2
2020-03-25 14:17:59 +08:00
90 次点击无人回复,我认真看了 3 次帖子,我还是不知道你要实现什么效果?标题说是兼容性问题,我又再次看了下,你的方案一,二,还是无法知道是什么兼容性问题。
"但是在 iphonex 上,底部会空出一截",这句话无法理解是什么。第二个方案,你是怎么确定设计图的 1334 就是设备高度 100vh ?
可能我回答得不是很好,请谅解,我觉得你贴个设计图,或者两个方案的贴图发出来,更认真的,你还可以发你的小程序代码片段出来,告诉我们哪里出现兼容问题。
b821025551b
2020-03-25 14:25:34 +08:00
现在都是用 flex 布局,定好宽度,高度自适应。
我 GET 到了你遇到的问题,关键在于设计是如何设计的,是那种滚动式的,还是一屏就只有一个页面。滚动式好说,如果是单屏页面,设计只给你了 6s,那让他再出 iPhone X 的设计布局,你再去做兼容。
cxe2v
2020-03-25 14:31:01 +08:00
t1 是什么元素?按理说背景的话你不需要去管理高度才对,如果是一个普通元素,那就按照流式布局设置好固定高度就行了
proger
2020-03-25 15:24:16 +08:00
同没明白 lz 想要什么效果 可以讲明白点
huai
2020-03-26 00:05:00 +08:00
1.背景图肯定要做成全屏。6s 不适配 x,图片居中,背景色打底
2.logo 以及 title 之类定位 用百分比 或者 rem,肯定不能直接写 px 定位
nbin2008
2020-03-26 09:56:56 +08:00
谢谢各位,现在,采用背景全铺,页面元素定位还是还有偏移,在页面上部分用 top,下部分用 bottom 定位,靠近页面中心,用居中和 transform 定位。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/655996

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX