尽管有适当的视口元标记，但网站负载在移动设备上略微放大

Posted 2023-02-23

【中文标题】尽管有适当的视口元标记，但网站负载在移动设备上略微放大

【英文标题】：Website loads zoomed in slightly on mobile devices despite proper viewport meta tag

【发布时间】：2016-11-08 17:31:45

【问题描述】：

视口元标记如下：

<meta name="viewport" content="width=device-width, initial-scale=1" />

尽管如此，我需要手动缩小 iphone/ipad 以使网站适合屏幕。没有最小宽度阻止网站缩小以适应，所以我能想到的可能是 ios Safari 计算视口大小而不考虑其垂直滚动条？无论如何，是否有强制它加载缩放的所有方式而不禁用整个缩放功能？

【问题讨论】：

有时添加content="width=device-width, height=device-height, initial-scale=1.0"会有所帮助-尝试更改它，看看它是否有效？

【参考方案1】：

对于任何好奇的人，我都解决了。

案例：

登陆页面有一个登录， iOS 会自动关注输入，因为字体大小低于 16 像素。 因为它是一个单页应用程序，所以视图保持不变。

解决方案：

确保输入的字体大小至少为 16 像素，否则 iPhone SE 等会放大以使文本输入更加可见。

【讨论】：

解决方案是什么？我有一个搜索框作为登录页面。哪个工作正常。搜索结果页面略微放大..

哈，四年后阅读原始评论，我很欣赏编辑。谢谢！

【参考方案2】：

这会有所帮助：

@media screen and (device-aspect-ratio: 9/16) 选择，文本区域，输入[type="text"]，输入[type="password"]， 输入[type="datetime"]，输入[type="datetime-local"]， 输入[type="date"]，输入[type="month"]，输入[type="time"]， 输入[type="week"]，输入[type="number"]，输入[type="email"]， 输入[type="tel"], 输入[type="url"] 字体大小: 16px;