Question

我不明白为什么iPhone for Safari的表格宽度会增加。我试图修改我的CSS，似乎“font-size”导致了这个问题。任何解决方案？

这是代码：

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移动版）会增加宽版块的字体大小（始终如此），这样，如果您双击放大该块（适合该块的块）屏幕宽度），文字清晰可辨。如果设置-webkit-text-size-adjust：100％（或无），它将无法执行此操作，因此当用户双击放大宽块时，文本将非常小;如果用户捏缩放，用户将能够阅读它，但文本将比屏幕更宽，他们必须水平平移才能阅读每行文字！

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

最后，如果您确实需要阻止Mobile Safari调整字体大小，您可以设置-webkit-text-size-adjust：100％，但这只是作为最后的手段，因为它可能会导致移动用户拥有难以阅读你的文字，因为它要么太小，要么在他们阅读的每一行之后都必须从一边到另一边平移。请注意，您必须使用100％而不是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获取设备宽度来改进它。

Safari for iPhone的表格宽度增加

1 个答案: