按钮文字在iPhone上无法正确呈现（CSS3）

Question

我正在构建一个使用角度和节点的应用。

我做了一些CSS工作来获得我喜欢的造型。 当我在网络上查看所有屏幕尺寸的按钮时， 它看起来很棒，但在iPhone上看起来很糟糕。 一切都很奇怪，填充/边距不正确。 只在按钮内。

我试过-webkit-appearance：none！important; 但没有运气。我在每个元素上尝试过它。

任何人都知道如何让我的按钮像他们一样渲染 在网上做什么？

这是一个复制问题的小提琴。在手机和网络视图中查看：https://jsfiddle.net/2543ge0a/2/

＆＃13;

＆＃13;

.socialBtn {
  -webkit-appearance: none!important;
  width: 300px;
  color: #fdfdfd;
  font-weight: bold;
  text-align: center!important;
  font-size: 17px;
}

.field p.control {
  margin: 0 auto;
  text-align: center!important;
}

.fbBtn {
  -webkit-appearance: none!important;
  background-color: #3b5998!important;
  border-radius: 0;
  text-align: center;
  color: #fdfdfd;
  border: none;
}

.googleBtn {
  -webkit-appearance: none!important;
  background-color: #D84B37!important;
  border-radius: 0;
  text-align: center;
  color: #fdfdfd;
  border: none;


}

.linkedinBtn {
  -webkit-appearance: none!important;
  background-color: #0077b5!important;
  border-radius: 0;
  text-align: center;
  color: #fdfdfd;
  border: none;

}
.signUpBtn {
  -webkit-appearance: none!important;
  background-color: #0077be!important;
  border-radius: 0;
  text-align: center;
  color: #fdfdfd;
  border: none;

}
.page {
  padding-top: 0;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 50px;
}
.title.has-text-centered {
  color: #111;
  font-size: 60px;
  font-weight: 500;
  margin-bottom: 1rem;
  width: auto;
}



h4.title {
  font-size: 25px;
  text-align: center;
}

.subtitle {
  margin-top: 1.5rem!important;
  text-align: left;
  line-height: 1.5;
}

h3.title {
  color: #fdfdfd;
  text-align: left;
  font-size: 35px;
  line-height: 1.3;
}

@media(max-width: 325px) {
  h3.title {
    color: #fdfdfd;
    text-align: left;
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .subtitle {
    margin-top: 1rem!important;
    text-align: left;
    line-height: 1.2;
    font-size: 17px;
  }

}

@media(max-width: 400px) {
  h3.title {
    color: #fdfdfd;
    text-align: left;
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .subtitle {
    margin-top: 1rem!important;
    text-align: left;
    line-height: 1.3;
  }
}

a {
  color: #FF9933;
}

.subtitle.is-6 {
  margin-bottom: 30px;
}

button {
  -webkit-appearance: none!important;
  text-align: center!important;
}

#ctaBtn {
  -webkit-appearance: none!important;
  padding: 5px 7px;
  height: 40px;
  width: 150px;
  color: #fdfdfd;
  font-weight: 600;
  font-size: 18px;
  box-shadow: 2px 2px 6px #111!important;
  background-color: #FF9933;
  border: none;
  text-align: center!important;
  -webkit-transition: all .15s ease; /* Safari and Chrome */
  -moz-transition: all .15s ease; /* Firefox */
  -ms-transition: all .15s ease; /* IE 9 */
  -o-transition: all .15s ease; /* Opera */
  transition: all .15s ease;
}

section.section {
  background-color: transparent;
  padding-top: 0;
  padding-bottom: 140px;
}

.button:hover {
  -webkit-appearance: none!important;
  -webkit-transform: translateY(3px);
  -moz-transform: translateY(3px);
  -ms-transform: translateY(3px);
  -o-transform: translateY(3px);
  transform: translateY(3px);
}

.button:active {
  -webkit-appearance: none!important;
  -webkit-transform: translateY(4px);
  -moz-transform: translateY(4px);
  -ms-transform: translateY(4px);
  -o-transform: translateY(4px);
  transform: translateY(4px);
}


.is-primary {
  background-color: #0077be!important;
}
.is-primary:hover {
  background-color: #0077be!important;
  opacity: .8;
}

input.input, textarea.textarea {
  border-radius: 0;
  border-right: none;
  border-top: none;
  border-left: none !important;
  box-shadow: none !important;
  background: transparent!important;
  color: #fdfdfd;
}

input::-webkit-input-placeholder {
  color: #111!important;
  opacity: .6;
}

input:-moz-placeholder { /* Firefox 18- */
  color: #111!important;
  opacity: .6;
}

input::-moz-placeholder {  /* Firefox 19+ */
  color: #111!important;
  opacity: .6;
}

input:-ms-input-placeholder {
  color: #111!important;
  opacity: .6;
}

.textarea {
  min-height: 10px;
}

input.input:focus, textarea.textarea:focus {
  border-bottom-color: #0077be;
}

p.content {
  color: #111;
}


#error {
  z-index: 1000;
  color: red;
  font-weight: bold;
  text-align: center;
  padding: 13px 30px;
  margin: 0 auto;
  top: 0;
  opacity: 0;
  height: 0;
  width: 300px;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  -ms-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}

img.image {
  margin: 0 auto;
}

@media(min-width: 650px) {
  img.image {
    max-height: 400px;
    max-width: 300px;
  }
}

@media screen and (min-width: 1008px) {
  .page {
    padding-left: 150px;
    padding-right: 150px;
  }
  .container {
    width: inherit;
  }

  .subtitle.is-6 {
    font-size: 20px;
  }

  a {
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
  }
}

@media(max-width: 700px) {
  .socialBtn {
    -webkit-appearance: none!important;
    width: 250px;
    text-align: center!important;
  }
}

＆＃13;

<div class="modal" [ngClass]="{'is-active': signup}">
  <div class="modal-background"></div>
  <div class="modal-card">
    <section class="modal-card-body">
      <i class="fa fa-times-circle" aria-label="close" (click)="onClickAction('exit')" style="float: right;
      -webkit-transform: translateX(10px);
      -moz-transform: translateX(10px);
      -ms-transform: translateX(10px);
      -o-transform: translateX(10px);
      transform: translateX(10px); translateX(10px)"></i>
      <div class="container">
        <h4 class="title"
            style="  font-family: 'Ubuntu', sans-serif;color: #0077be;">For the innovators</h4>
        <h6 class="subtitle has-text-centered">Signup</h6>
        <p class="content">For our first <strong style="color: #FF9933; font-size: 17px;">1000</strong> users, we're offering
          <strong style="color: #FF9933; font-size: 17px;">free</strong>
          fees on all transactions for the first year. We'll take care of the business, you just provide the electronics.</p>
        <div *ngIf="!signupComplete">
          <div class="field" style="text-align: center">
          <div class="card">
            <input
              type="email"
              name="email"
              #emailT="ngModel"
              [(ngModel)]="user.email"
              placeholder="email *required"
              required
              style="color: #111"
              class="input">
            <input
              type="text"
              name="name"
              #nameT="ngModel"
              [(ngModel)]="user.name"
              placeholder="name"
              style="color: #111"
              class="input">
            <input
              type="text"
              name="image"
              #imageT="ngModel"
              [(ngModel)]="user.image"
              placeholder="image url"
              style="color: #111"
              class="input">
          </div>
        </div>
          <div class="field">
            <p class="control">
              <button
                (click)="onSignup()"
                class="button socialBtn signUpBtn has-text-centered">Join rent
              </button>
            </p>
          </div>

          <h4 class="subtitle has-text-centered">Or</h4>

          <div class="field">
            <p class="control">
              <button
                (click)="authSignin('facebook')"
                class="button socialBtn fbBtn">
                <span class="icon is-small">
                  <span class="fa fa-facebook"></span>
                </span> <span> | Signup with Facebook</span>
              </button>
            </p>
          </div>
          <!--<div class="field">-->
          <!--<p class="control">-->
            <!--<button-->
              <!--(click)="authSignin('linkedin')"-->
              <!--class="button socialBtn linkedinBtn">-->
                <!--<span class="icon is-small">-->
                  <!--<span class="fa fa-linkedin"></span>-->
                <!--</span> <span> | Signup with Linkedin</span>-->
            <!--</button>-->
          <!--</p>-->
        <!--</div>-->
          <div class="field">
            <p class="control">
              <button
                (click)="authSignin('google')"
                class="button socialBtn googleBtn">
                <span class="icon is-small">
                  <span class="fa fa-google"></span>
                </span> <span> | Signup with Google</span>
              </button>
            </p>
          </div>
        </div>
        <img src="../../assets/animat-checkmark-color.gif" alt="" class="image" *ngIf="checkmark">
        <h4 class="title" *ngIf="thankyou">Thanks for signing up! <br>Look out for an email</h4>
      </div>
    </section>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

正如您所描述的那样一切都是奇怪的，并且iPhone上的填充/边距不正确。似乎缺少视口，因此请将此视口添加到标题中。希望这会对你有所帮助。

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />