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

H5 页面折叠屏适配的问题,请教大佬!

  •  
  •   minuo0day ·
    minuo0318 · 2023-06-12 22:52:39 +08:00 · 1912 次点击
    这是一个创建于 515 天前的主题,其中的信息可能已经有所发展或是发生改变。

    h5 的活动页面,大体是 loading 页进来之后选择头像模版生成海报进行分享这么一个项目; 前端依然是用 vue 写的 Loading 和首页这样子,media query 啊,REM 布局、js 啊等等这些都用了,用来适配各种机型,常规手机打开完美,折叠屏像三星 z 这样上下翻的也没问题,唯独像荣耀 Magic Vs 折叠屏手机这样的,loading 页打开后排版就会被各种放大导致样式错乱,是不是前端需要适配移动端和平板两种设计呢?特此请教适配问题,希望指正

    11 条回复    2023-06-20 10:19:06 +08:00
    zcf0508
        1
    zcf0508  
       2023-06-12 23:17:36 +08:00 via Android
    minuo0day
        2
    minuo0day  
    OP
       2023-06-12 23:44:04 +08:00
    @zcf0508 感谢大神,方便进一步和您沟通么
    zcf0508
        3
    zcf0508  
       2023-06-12 23:48:51 +08:00 via Android
    @minuo0day 暂时还不能用,还需要很长的开发
    learnshare
        4
    learnshare  
       2023-06-13 00:03:45 +08:00
    响应式要适应各种不同的场景,折叠屏没什么特别的
    minuo0day
        5
    minuo0day  
    OP
       2023-06-13 00:48:07 +08:00
    @learnshare 但折叠屏比例近乎 1:1 ,甲方要求很高
    learnshare
        6
    learnshare  
       2023-06-13 00:59:52 +08:00
    @minuo0day 屏幕尺寸、宽高比(屏幕方向)也都是响应式要覆盖的不同角度而已
    han3sui
        7
    han3sui  
       2023-06-13 08:13:32 +08:00
    这种应该类似 h5 在 pad 上打开,宽度超过了一定值,字体大小就固定一个值了,不能无限放大。

    如果视觉效果要求很高的话,设计稿要设计一版效果吧
    AuYuHui
        8
    AuYuHui  
       2023-06-13 11:48:06 +08:00
    postcss-mobile-forever

    试试这个库
    cssTheGreatest
        9
    cssTheGreatest  
       2023-06-13 13:50:46 +08:00
    折不折叠屏幕无所谓,应该关注你的设计 /样式代码在不同宽高比例的屏幕中的适配。
    叫上设计师,在浏览器模拟器里拉几个非常规的长宽比看看吧
    wsWmsw
        10
    wsWmsw  
       2023-06-20 09:26:30 +08:00
    从可访问性的角度,是要让布局适配各种屏幕的。不过看你用了媒体查询,按道理展开的折叠屏应该会匹配到更宽的媒体查询吧。

    postcss-mobile-forever 这个是 vw 布局,能限制最大宽度,可以试试。
    https://github.com/wswmsword/postcss-mobile-forever
    minuo0day
        11
    minuo0day  
    OP
       2023-06-20 10:19:06 +08:00   ❤️ 1
    @wsWmsw
    @AuYuHui
    亲测有效
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2253 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 16:10 · PVG 00:10 · LAX 08:10 · JFK 11:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.