V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
nbin2008
V2EX  ›  程序员

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

  •  
  •   nbin2008 · 2020-03-25 12:19:31 +08:00 · 1220 次点击
    这是一个创建于 1486 天前的主题,其中的信息可能已经有所发展或是发生改变。
    描述: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 按设计稿宽高定位,页面展示差异很大

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