页面中引入了一个表格,开发工具模拟和Android中显示正常。但在iOS下,表格中某些列的字体会莫名变大。如下图
注:每个td的样式都是相同的。但哪一列字体变大,目前未发现规律(同一表格的某些字体变大,可以重现)。
< scroll-view scroll-x = "" class = "scroll-area" > < view class = "table" > < view class = "tr" > < view class = "th" >姓名</ view > < view class = "th" >作业完成时间</ view > < view class = "th" >自主学习汇报</ view > < view class = "th" >深蹲</ view > < view class = "th" >俯卧撑</ view > < view class = "th" >仰卧起坐</ view > < view class = "th" >平板支撑</ view > < view class = "th" >其他</ view > </ view > < view class = "tr" > < view class = "td" >某某</ view > < view class = "td" > < text > 21:45 </ text > </ view > < view class = "td" > < text > 英语《名校课堂》M6M7错题复习 </ text > </ view > < view class = "td" > < text > 50个 </ text > </ view > < view class = "td" > < text > </ text > </ view > < view class = "td" > < text > 2分钟78个 </ text > </ view > < view class = "td" > < text > 40秒一组(两组) </ text > </ view > < view class = "td" ></ view > </ view > < view class = "tr" > < view class = "td" >小张</ view > < view class = "td" > < text > 21:45 </ text > </ view > < view class = "td" > < text > 英语《名校课堂》M6M7错题复习 </ text > </ view > < view class = "td" > < text > 50个 </ text > </ view > < view class = "td" > < text > </ text > </ view > < view class = "td" > < text > 2分钟78个 </ text > </ view > < view class = "td" > < text > 40秒一组(两组) </ text > </ view > < view class = "td" ></ view > </ view > </ view > </ scroll-view > |
样式表如下:
.scroll-area{ width : 100% ; overflow : auto ; } .table { display : table; min-width : 98% ; border-collapse : collapse ; margin : auto ; white-space : nowrap ; font-size : 16px ; } .table . caption { display : table-caption ; font-size : 20px ; text-align : center ; padding : 15px ; } .table .tr { display : table-row ; width : auto ; height : auto ; line-height : 60 rpx; } .table .th { display : table-cell ; font-weight : bold ; border : 1px solid black ; text-align : center ; padding : 5px ; vertical-align : middle ; background-color : #ccc ; } .table .td { display : table-cell ; border : 1px solid black ; text-align : left ; padding : 4px ; vertical-align : middle ; } .td text{ font-size : 16px ; } |
这是由于webkit内核浏览器在移动端的Text Autosizer特性引起的,给相应元素设置 -webkit-text-size-adjust: none,禁用掉这个特性即可。
这个问题官方一直没解决。目前我的解决方案是限制td的总宽度不大于屏幕宽度,如果大于则换行。
按照教程提供下代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
https://developers.weixin.qq.com/s/RGFPIBmg7u4t
具体是怎么操作复现的?
在iOS真机下展示即可复现。
测试两台iPhone机型。xr以及5C,均未复现该问题
呃,iPhone X,6S,7,均可复现啊