首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >小程序真机调试比例失调

小程序真机调试比例失调

作者头像
master336
发布2026-06-15 18:40:55
发布2026-06-15 18:40:55
790
举报
问题:开发工具开发完成后真机调试按钮出现问题(其他问题参考解决思路)
1. 发现问题

先来对比一组图

上图左侧为模拟器上的效果,按钮横向排列,右侧为垂直排列。

2. 分析问题

看一下控制按钮的样式(已设置其父dom宽度100%):

代码语言:javascript
复制
.todolist-button button{
  width: 15%;
  margin-left: 5%;
  padding: 0;
  min-height: 0;
  font-size: 0.8em;
  font-weight: 200;
  line-height: 30rpx;
  display: inline-block;
  border: 2rpx solid red;
}

以上样式看来,真机显示不合理,启动远程调试

经调试,发现自带了一个button:not([size='mini'])样式选择器控制的样式影响到了实际的显示

这玩意哪来的?想了好久没有想明白,翻翻小程序的开发文档,也并未找到答案,想着,如果贸然改写这个样式可能并不能全面解决问题,查看代码修改记录,在app.json中发现一处修改很可疑:

3. 解决问题

此处的"style": "v2"是近期修改的,将此项还原,发现button:not([size='mini'])不在了,重新调试样式,问题解决。

4. 反思(反馈)问题

再次查看小程序开发文档:

该样式影响的范围不仅仅是button还有{icon radio checkbox switch slider}

重新检查项目中用到的以上受影响标签,调整样式异常,完工!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2026-06-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 问题:开发工具开发完成后真机调试按钮出现问题(其他问题参考解决思路)
  • 1. 发现问题
  • 2. 分析问题
  • 3. 解决问题
  • 4. 反思(反馈)问题
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档