最新消息:20190717 VPS服务器:Vultr新加坡,WordPress主题:大前端D8,统一介绍入口:关于

【已解决】绘本查询小程序的iPhoneX中超长的tag高度和间距异常

iPhone crifan 190浏览 0评论
别人是iPhone X,绘本查询中超长的tag,在别的机型上显示没问题,但是此处上下间距比对:
去看看设备相关信息
打开了调试:
然后也是:
WeChatLib:2.4.2
估计也是这个原因
去试试WXML
目前结论是:
估计是最新的小程序的库是 2.4.2导致了布局问题
【总结】
iPhoneX中 长tag 上下间距问题:
调试了下 原因是:
你们的微信版本太高 内部所用开发的库版本 是最新的2.4.2
-》超过了 目前小程序开发工具中最新的2.4.1
-》解决办法:等微信官网升级小程序开发工具 支持2.4.2 才能调试 才能找到布局乱的原因 才能解决问题
【后记 20181213】
在:
【记录】微信开发者工具升级到小程序库版本为最新的2.4.2
后,结果问题依旧:
但是模拟器中还是正常的:
所以还只能等真机给我:
iPhone X
然后想办法看看能否找到问题的原因
才能再去想办法解决
现在问题转换为:
【已解决】小程序中如何用iPhone真机调试
然后就是调试方面的,html,css等方面的技术细节了:
通过去掉height的限制:
手机上能看到全部的tag内容了:
继续试试其他参数的可能
感觉需要去找找,如果超过宽度,不自动回车换行的参数是啥
貌似是这个:
white-space:normal;
?
好像又不是
去找找
css 文字 超出宽度 不换行
css text exceed width not show
CSS自动换行、强制不换行、强制断行、超出显示省略号 – Yvette Lau的专栏 – CSDN博客
抽空试试
text-overflow: hidden;
问题依旧。
CSS 强制不换行,文字溢出显示省略号~ – adley_app的博客 – CSDN博客
试试:
white-space: nowrap;  
overflow:hidden;
效果接近我们要的效果了:
再去想办法:不要超过右边的边
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行 – 疯狂源自梦想 技术成就辉煌 – CSDN博客
html – how to cut off the text when it exceed the width of a div – Stack Overflow
试试
word-break:keep-all;
问题依旧
感觉是:此处没有设置最大的宽度
导致:text超过宽度就隐藏,没法生效
去设置一个tag的最大宽度?
max-width:220px;
基本上实现了,此处想要的效果:
不过有点点其他细节需要考虑:
对于更宽的设备来说,长tag就没法完全显示了
办法感觉有2种:
  • 改为屏幕宽度的百分比?
    • 兼容性和适配不同屏幕会更好
  • 改为媒体查询media query,判断是iPhone X一类的设备,才会设置这个最大宽度
    • 毕竟其他设备目前没遇到这个问题,所以也是可以考虑的方案
先去试试第一种
tag的最大宽度 是 屏幕宽度百分比
220px / iPhone X的屏幕宽度375 = 0.59%
但是去设置
max-width:59%;
却会友导致iPhone X的其他布局:左边的padding失效了:
列表太靠左边了:
而且去改为其他比例,比如70%也不行,左边还是太靠左
另外加上min-width:
max-width:70%;
min-width:20%;
问题依旧。
所以放弃这个方法。
html – <p> when text exceeds width, continue in new line – Stack Overflow
试试
word-wrap: break-word;
问题依旧。
css – how to hide too long texts in div elements? – Stack Overflow
overflow-wrap | CSS-Tricks
试试:
overflow-wrap: break-word;
没用。
去试试当检测到是iPhone X时,去加上宽度限制
【已解决】小程序中如何媒体查询判断是iPhone X时加上特定的css的参数设置
【总结】
最终的解决办法是:
/* follow heigh=812px only work for real phone: iPhone X */
@media screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .tag_normal{
    max-width:220px;
  }
}

/* follow heigh=724px only work for weixin iPhone X emulator */
@media screen and (device-width: 375px) and (device-height: 724px) and (-webkit-device-pixel-ratio: 3) {
  .tag_normal{
    max-width:220px;
  }
}
使得iPhone X的模拟器和真机都正常work,可以显示出高度一致的tag,解决了布局异常的问题了。
效果:
详情请参考:
【已解决】小程序中如何媒体查询判断是iPhone X时加上特定的css的参数设置
【后记】
但是还有问题:
【已解决】小程序中给组件tags传递Boolean参数控制是否使用特殊样式

转载请注明:在路上 » 【已解决】绘本查询小程序的iPhoneX中超长的tag高度和间距异常

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
87 queries in 0.112 seconds, using 20.74MB memory