解决微信小程序真机显示界面文本框不正常显示

 问题描述:正常显示应该如下

真机测试时有些机型显示如下,样式丑陋

问题解决:

限制输入手机号这一组件的宽度,添加style="width:{{'200rpx'}}"


问题原因:输入手机号和发送验证码这两个组件属于并列关系,之前没有设定输入手机号组件的宽度,导致有些机型默认宽度过宽,从而对发送验证码组件产生挤压效果。

即利用float属性把页面对象向左或向右浮动: 
宽度值可以多试几次,直到页面布局正常为止

 


     
       
       


input输入框的相关属性:

你可能感兴趣的:(微信小程序)