Question

我正在尝试制作纸质计算器，它工作正常，但存在设计问题。

输入框在PC屏幕上正确显示，即使在响应选项中（您可以选择屏幕尺寸），但在实际手机上，输入框的宽度不相等。

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：

::-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。 style = width：auto;标签刚刚添加，没有用。

Answer 1

您应该记住的一件事是，它们是两种不同的浏览器，因此它们可以采取不同的行动。我还建议使用设定宽度，而不是自动。将宽度设置为auto实质上会告诉浏览器按照自己的意愿执行操作，这与您的情况相符。

希望这有帮助！

手机输入框宽度不均匀

1 个答案: