我的媒体查询不适用于移动设备

Question

我刚刚推出了我的新网站，并不是为了移动设备。当我将窗口向下拖动到大小时，它似乎在我的桌面上调整大小。

我在下面使用了这些

@mixin breakpoint($point) {
  @if $point == desktop {
        @media (max-width:20000px) { @content; }
  }
  @else if $point == tablet {
        @media (max-width:966px) { @content; }
  }
  @else if $point == tablet-mini {
        @media (max-width:730px)  { @content; }
  }
  @else if $point == mobile {
        @media (max-width:499px)  { @content; }
  }
  @else if $point == mobile-mini {
        @media (max-width:342px)  { @content; }
  }
}

然后我将这些应用到这样的CSS部分，

.name {
    @extend %lato-bold;
        background: url('/strongman.jpg') 50% 2px no-repeat;
        color: $white;
        font-size: 45px;
        text-align: center;
        padding: 30px 0 6px 0;
        font-style: italic;
        @include breakpoint(mobile) {
            font-size: 25px;
            padding: 30px 0 5px 0;
        }
    }

我做错了什么？