H5button按钮在webviwe中的不一样表现

  1. 在项目中有一个button按钮,在chrome和ios上表现都很正常,可是在Android上表现的文字稍微的往上一点点,很诡异。因而Google了一下,上面说使用rem布局的话Android的像素处理与ios不一样,因此致使出现这个问题。网上说的几种解决方法,一种去掉标签的移动视口,可是去掉之后全部数据单位会缩小,不是很实用,还有说是加line-hight:1一样是不起做用。还有说是加padding让文字剧中,可是测试了一下并不还使。
  2. 因而我把button的高度写死,不用rem,不给他line-hight,使用padding,可是在iOS上不是很友好,没办法只能分开处理。
str+=`<button class="noForward" style=" padding: 2px;" data-title="` + res.data.product_list[i].product_name + `" data-id="` + res.data.product_list[i].product_id + `" data-price="` + res.data.product_list[i].price + `" data-code="` + res.data.product_list[i].product_code + `">转发</button>` +
                  `</li>` +
                  `</ul>` +
                  `</div>` +
                  `</div>` +
                  `</li>`
              }else{
                str+=`<button class="noForward" style=" line-height: 30px;" data-title="` + res.data.product_list[i].product_name + `" data-id="` + res.data.product_list[i].product_id + `" data-price="` + res.data.product_list[i].price + `" data-code="` + res.data.product_list[i].product_code + `">转发</button>` +
                  `</li>` +
                  `</ul>` +
                  `</div>` +
                  `</div>` +
                  `</li>`
              }
复制代码
  1. 分开处理这样就能够了
相关文章
相关标签/搜索