モバイルでの入力ボックスの幅が不均一

Question

紙の計算機を作ろうとしていますが、問題なく動作しますが、設計に問題があります。

応答ボックスのオプション（画面サイズを選択できます）でも入力ボックスは正しく表示されますが、実際の電話機では入力ボックスの幅が同じではありません。

HTMLコード：

<div class="container-fluid"> 

<div id = "case_one" class="calcoptions sizemod"> 

<h5>1. To find the weight (in <b>Kilograms</b>) of a ream containing 500 sheets of a given size in <b>inches</b> and <b>Gram-Weight.</b></h5> 
<br>  

Length: <input type="number" step="0.01" name="length_in" id="txt_weight" placeholder="Length(inch)" style = "width:auto;" min="0" onkeyup="calculateWeightInInches();"> 
<br><br> 

Width: &nbsp;&nbsp;<input type="number" style = "width:auto;" step="0.01" name="width_in" id="txt_width" placeholder="Width(inch)" min="0" max='300' onkeyup="calculateWeightInInches();"> 
<br><br> 

GSM: &nbsp;&nbsp;&nbsp;<input type="number" style = "width:auto;" min="5" max="800" step="0.01" name="length_in" id="txt_GSM" placeholder="GSM" onkeyup="calculateWeightInInches();"> 
<br><br> 

Weight: <input type="number" style = "width:auto;" step = "0.01" name="Weight_Kg" id = "txt_Result" readonly="readonly"> 
<br><br> 
</div> 

CSS：PC上で

::-webkit-input-placeholder { 


text-align: center; 
} 

:-moz-placeholder { /* Firefox 18- */ 
    text-align: center; 
} 

::-moz-placeholder { /* Firefox 19+ */ 
    text-align: center; 
} 

:-ms-input-placeholder { 
    text-align: center; 
} 

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    margin: 0; 
} 

input[type='number'] { 
    -moz-appearance:textfield; 
} 

@media only screen and (max-width: 900px) { 
    .sizemod {  
    display: none; 


    } 
} 

@media (min-width: 858px) { 
    html { 
     font-size: 12px; 
    } 
} 

@media (min-width: 780px) { 
    html { 
     font-size: 11px; 
    } 
} 

@media (min-width: 702px) { 
    html { 
     font-size: 10px; 
    } 
} 

@media (min-width: 724px) { 
    html { 
     font-size: 9px; 
    } 
} 

@media (max-width: 623px) { 
    html { 
     font-size: 8px; 
    } 
} 

select { 
     font-family: Arial, sans-serif; 
     font-size: 10px; 
     /*font-style: italic;*/ 
    } 
    select#fixed { 
     -webkit-appearance: none; 
    } 

textarea { 
    width: 20px; 
}; 

input[type="number"] { 
    width: 20px; 
}; 

：

実際のモバイルオン：

P.S.スタイル=幅：自動;タグが追加されましたが、機能しませんでした。

Answer 1

あなたが念頭に置いておくべきことは、それらが2つの異なるブラウザであることです。したがって、彼らは異なった行動をとることができます。私はまた、自動ではなく、設定幅を使用することをお勧めします。幅をautoに設定すると、基本的にブラウザが望む通りに動作するように指示されます。

希望すると便利です。