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

我正在构建使用角度和节点的应用程序。按钮文字无法在iPhone上正确呈现（CSS3）

我做了一些CSS工作，以获得我喜欢的样式。当我查看网页上的按钮时，所有屏幕尺寸，看起来不错，但在iPhone上，它看起来很可怕。一切都很奇怪，填充/边距不正确。只在按钮内。

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

任何人都知道我可以做些什么来让我的按钮呈现像他们在网络上做的？

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

.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; 
 
    } 
 
}

<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>

来源

2017-08-16 Jonathan Corrin

你能提供一些HTML吗？也许做一个小提琴帮助调试。 –

@ G.Hunt当然可以给我一些时间在工作中。但我会为你准备的。我感谢帮助！ –

我添加了html @ G.Hunt。你可以在https://rent-app-web.com找到演示。只需进入并点击即时兴趣按钮（这是一个按钮，我有一个问题），并检查两者如何在Web和移动渲染。完全不同 –

正如你描述一切都对准怪异和填充/利润率是不正确的iPhone上。看来，视口缺失，所以将此视口添加到您的标题。希望这会帮助你。

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

来源

2017-08-17 16:55:49 kravisingh

由于这是一个角度应用程序。我的一个index.html文件有 –

与您写的类似元相比，这是否足够？ –

'maximum-scale = 1.0'也是必需的，你是否试过这个？ – kravisingh

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

回答

相关问题