css - 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

Mobile Safari(如 Chrome for Android、Mobile Firefox 和 IE Mobile)会增加宽 block 的字体大小(始终)，这样如果您双击放大该 block (适合该 block 到屏幕宽度)，文本将清晰可辨。如果您设置 -webkit-text-size-adjust: 100%(或无)，它将无法执行此操作，因此当用户双击以放大宽 block 时，文本将小得难以辨认；如果用户捏合放大，他们将能够阅读它，但是文本会比屏幕宽，他们必须水平平移才能阅读每一行文本!

理想情况下，您可以通过使用响应式网页设计技术使您的设计适应移动屏幕尺寸来解决此问题(在这种情况下，您将不再有任何非常宽的 block ，因此移动浏览器将不再调整您的字体大小)。

最后，如果你真的需要阻止 Mobile Safari 调整你的字体大小，你可以设置 -webkit-text-size-adjust: 100%，但是这只是作为最后的手段，因为它可能会导致移动用户有难以阅读您的文字，因为它要么太小，要么他们必须在阅读每一行后从一侧平移到另一侧。请注意，您必须使用 100% 而不是 none，因为 none 在桌面浏览器中具有令人讨厌的副作用。 Mobile 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 获取设备宽度来改进这一点。