iPhone的Safari上的表单宽度增加

Question

我不明白为什么iPhone的Safari上的表单宽度会增加。 我试图修改我的CSS，似乎是“字体大小”引起了问题。 有解决方案吗？

这是代码：

HTML ：

<input type="text" id="form" class="newsletter_input" name="email"> 

CSS ：

.newsletter_input {
border: 0px solid #fff;
background: #fff;
color: #0ce980;
font-family: 'Lato', Arial;
font-weight: 300;
font-size: 42pt;
width: 855px;
height: 100px;
margin-left: 50px;
margin-top: 10px;
text-align: center; 
}

.newsletter_input:focus {
ouline: 0;  
}

Answer 1

移动Safari（例如适用于Android的Chrome，移动Firefox和IE Mobile的Chrome）会一直增加宽块的字体大小，因此，如果您双击以放大该块（使块适合屏幕宽度） ，文字将清晰易读。 如果将-webkit-text-size-adjust设置为100％（或不设置），则将无法执行此操作，因此，当用户双击以放大宽块时，文本将非常小。 用户只要捏一下就可以阅读，但是文本会比屏幕宽，他们必须水平平移才能阅读每一行文本！

理想情况下，您将使用响应式Web设计技术来解决此问题，以使您的设计适应移动屏幕的大小（在这种情况下，您将不再有任何非常宽的块，因此移动浏览器将不再调整字体大小）。

最后，如果您确实需要阻止Mobile Safari调整字体大小，则可以设置-webkit-text-size-adjust：100％，但这只能作为最后的选择，因为这可能会导致移动用户难以阅读您的字体。文本，因为它可能太小，或者他们必须在阅读每行之后左右左右滚动。 请注意，您必须使用100％而不是无，因为在桌面浏览器中，没有一种会有讨厌的副作用。 移动Firefox和IE Mobile也具有等效的-moz-text-size-adjust和-ms-text-size-adjust属性。

编辑：例如，在您的情况下，最简单的可能是第二种选择，因此您可以尝试添加以下CSS：

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
   .newsletter_input {
        width: 855px;
    }
    .newsletter_input #form{
        font-size:42pt
    }
}

像这样对855px进行硬编码并不理想； 您可以通过使用各种CSS媒体查询或从JavaScript获取设备宽度来改善这一点。