Question

我在Ipad 2上正确显示标题的某些部分时遇到问题（右上角的社交图标）这是我的网站：link

在这里你可以看到它在Ipad上的样子： link

我在不同的移动设备模拟器上测试了我的网站，看起来非常好。实际上，图标会移动到标题的底部，整个标题会被拉伸。

我无法弄清楚这有什么不对。我会感激一些帮助。

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: 320px;
    }
    .newsletter_input #form{
        font-size:42pt
    }
}

虽然像这样硬编码320px并不理想;您可以通过使用各种CSS媒体查询或从JavaScript获取设备宽度来改进它。

iPad 2：菜单显示正确的问题

1 个答案: