iphone布局中的文本框被截断

Question

当您将浏览器窗口缩小为 iphone 布局时...... 你可以看到不同的布局...... 问题是文本字段的右侧被切断了...... 如何解决它... 在下面提供我的代码.....

http://jsfiddle.net/jPvzL/1/

<input type="text" placeholder="Company Name " name="fullname" maxlength="30" required="required" id="id_username">
<input type="text" placeholder="Contact Name" name="company" maxlength="30" required="required" id="id_company">
<input type="text" placeholder="Address1" name="email" maxlength="75" required="required" id="id_email">
<input type="password" placeholder="Address2" name="password" maxlength="16" required="required" id="id_password">
<input type="password" placeholder="Address3" name="repassword" required="required" id="id_repassword">
<input type="text" placeholder="City " name="fullname" maxlength="30" required="required" id="id_username">
<div class="controls">
    <select name="select" id="state" style="width: 300px;height: 38px;">
        <option value="California" selected="">California</option>
        <option value="New York">New York</option>
        <option value="Texas">Texas</option>
    </select>
</div>
<input type="text" placeholder="Zip" name="email" maxlength="75" required="required" id="id_email">
<div class="controls">
    <select name="select" id="country" style="width: 300px;height: 38px;">
        <option value="USA" selected="">USA</option>
        <option value="India">India</option>
        <option value="Korea">Korea</option>
        <option value="Vietnam">Vietnam</option>
    </select>
</div>
<input type="text" placeholder="Phone" name="company" maxlength="30" required="required" id="id_company">
<input type="text" placeholder="Fax" name="email" maxlength="75" required="required" id="id_email">
<input type="password" placeholder="Email" name="password" maxlength="16" required="required" id="id_password">
<input type="text" placeholder="URL" name="company" maxlength="30" required="required" id="id_company">
<input type="text" placeholder="GL Account" name="email" maxlength="75" required="required" id="id_email">
<input type="password" placeholder="" name="password" maxlength="16" required="required" id="id_password">
<textarea name="inquiry" placeholder="Notes" rows="3" required="required" id="id_inquiryForm" style="width:290px;"></textarea>

Answer 1

看起来您的#signup-modal div 的宽度设置为 125 像素。只需将其增加到适合输入的正确尺寸即可。或删除 'overflow:hidden'

Answer 2

几周前遇到过这个问题。我不知道您的 CSS 是什么样的，但请尝试在您的输入字段中添加百分比宽度：

form input{width: 99%;}

YMMV。您可能还需要为您的 textarea 添加一些内容并选择字段并根据需要调整百分比。