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

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

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

问题解决：

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

<input placeholder="请输入您的手机号" type='number' maxlength='11' bindinput='inputPhoneNum' style="width:{{'200rpx'}}" />
问题原因：输入手机号和发送验证码这两个组件属于并列关系，之前没有设定输入手机号组件的宽度，导致有些机型默认宽度过宽，从而对发送验证码组件产生挤压效果。

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

 <div class="form-group">
      <input style="width:55%;float:left;" type="code" class="form-control" placeholder="验证码" id="code" name="code" onkeyup="value=value.replace(/[^\d]/g,'')" autocomplete="off" required="">
       <input style="width:40%;float:right;" type="button" id="btn_yzm" class="btn btn-primary" value="获取验证码" />
       <div class="clearfix"></div>
</div>

input输入框的相关属性：