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

Posted 2023-03-06

【中文标题】iPad 2：菜单显示正确的问题

【英文标题】：iPad 2: problems with correct menu display

【发布时间】：2013-09-11 17:49:45

【问题描述】：

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

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

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

我不知道出了什么问题。我会很感激一些帮助。

【参考方案1】：

Mobile Safari（如 android 版 Chrome、Mobile Firefox 和 IE Mobile）会（始终）增加宽块的字体大小，这样，如果您双击放大该块（使该块适合屏幕宽度），文本将清晰易读。如果您设置 -webkit-text-size-adjust: 100%（或无），它将无法做到这一点，因此当用户双击放大宽块时，文本将难以辨认；用户可以通过捏拉放大来阅读它，但是文本会比屏幕宽，他们必须水平平移才能阅读每一行文本！

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

最后，如果您确实需要阻止 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: 320px;
    
    .newsletter_input #form
        font-size:42pt
    

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