公告列表
公告列表
收藏
回答

iOS 下table字体莫名变大，求解

页面中引入了一个表格，开发工具模拟和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: 60rpx;
}
 
.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;
}


回答关注问题邀请回答
收藏

3 个回答

  • herock
    herock
    2022-01-12

    这是由于webkit内核浏览器在移动端的Text Autosizer特性引起的，给相应元素设置 -webkit-text-size-adjust: none，禁用掉这个特性即可。

    2022-01-12
    有用 2
    回复
  • 爱笛生叶
    爱笛生叶
    2019-11-28

    这个问题官方一直没解决。目前我的解决方案是限制td的总宽度不大于屏幕宽度，如果大于则换行。

    2019-11-28
    有用
    回复
  • 是小白啊
    是小白啊
    2018-12-12

    按照教程提供下代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。

    2018-12-12
    有用
    回复 9
    查看更多(4)
请 登录 后发表内容
相关文档