小程序真机调试比例失调

迈不过友情╰ 2023-07-08 05:59 33阅读 0赞

### 问题：开发工具开发完成后真机调试按钮出现问题（其他问题参考解决思路） ###

### 1. 发现问题 ###

先来对比一组图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70][]

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

### 2. 分析问题 ###

看一下控制按钮的样式（已设置其父dom宽度100%）：

.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;
    }

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 1][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 2][]

### 3. 解决问题 ###

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

### 4. 反思(反馈)问题 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 3][]

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200225131304293.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200225131750881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200225132215714.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200225132402673.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hc3RlcjMzNg==,size_16,color_FFFFFF,t_70