按鈕文字無法在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）

回答

相關問題