html - iOS 上奇怪的 CSS 宽度和高度

Question

我在 iOS 上遇到宽度和高度属性问题，而在 PC 上的 Chrome 上它工作正常。

在 Chrome 上运行良好:

在 iOS 上，相同的代码:

SCSS 代码:

.zoom-controls {
  position: absolute;
  top: 20px;
  right: 15px;
  height: 100%;
  @include box-sizing(border-box);
  @include flexbox(column, center);

  button {
    @include flex(0);
    -webkit-appearance: none;
    font-family: Arial, sans-serif;
    border: none;
    height: 40px;
    width: 40px;
    line-height: 0px;
    background-color: rgba(#000, 0.5);
    color: #FFF;
    margin-bottom: 20px;
    font-size: 36px;
    outline: 0;
    border-radius: 50%;
    text-align: center;
    @include box-sizing(border-box);

    .up {
      line-height: 10px;
    }
  }
}

flexbox 和 flex 自定义混合:

@mixin flex($grow, $shrink: 1, $basis: auto)
{
  -webkit-box-flex: $grow;
  -moz-box-flex: $grow;
  -webkit-flex: $grow $shrink $basis;
  -ms-flex: $grow $shrink $basis;
  box-flex: $grow $shrink $basis;
  flex: $grow $shrink $basis;
}


@mixin flexbox($direction, $justify, $wrap: nowrap)
{
  @include display-flex();
  @include flex-flow($direction, $wrap);
  @include justify-content($justify);
}

最后是这些控件的 HTML:

<div class="zoom-controls">
  <button class="up" hm-tap="add()">+</button>
  <button class="down" hm-tap="subtract()">-</button>
</div>

看起来确实存在一些宽度问题，虽然我不知道是什么原因造成的。

Answer 1

你需要改变这个

@mixin flex($grow, $shrink: 1, $basis: auto)
{
  -webkit-box-flex: $grow;
  -moz-box-flex: $grow;
  -webkit-flex: $grow $shrink $basis;
  -ms-flex: $grow $shrink $basis;
  box-flex: $grow $shrink $basis;
  flex: $grow $shrink $basis;
}

进入这个

@mixin flex($grow, $shrink, $basis: auto)
{
  -webkit-box-flex: $grow;
  -moz-box-flex: $grow;
  -webkit-flex: $grow $shrink $basis;
  -ms-flex: $grow $shrink $basis;
  box-flex: $grow $shrink $basis;
  flex: $grow $shrink $basis;
}

我认为这是导致问题的原因

$shrink: 1