iPhone Safari 上的自动缩放
Mobile Safari 有没有办法识别手机网站并自动放大？ 这在其他手机和浏览器上如何工作？
我想避免查看 user_agent 并为每个移动浏览器发送不同的页面。
Is there a way for Mobile Safari to recognize a site meant for mobile phones and automatically zoom in? How does that work on other phones and browsers?
I'd like to avoid looking at user_agent and sending a different page for each mobile browser.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
请参阅 配置视口 Apple Web 应用程序开发人员指南的一部分。
See the configuring the viewport part of the Apple web-app developer guide.
我刚刚注意到，如果您将 body 或主包装 div 高度设置为 100%，这可能会影响它在移动浏览器上缩放/渲染的距离。 在 mobile safari 和 android 的 chrome 浏览器中证实了这一点。 一旦我将 #siteWrapper 高度从 100% 设置为自动，它就会以更好的比例渲染。
（主包装上的 100% 高度通常与粘性页脚一起使用。）
I just noticed that if you have your body or main wrapper div height set to 100%, this can mess with how far out it zooms/renders on a mobile browser. Confirmed this in mobile safari and android's chrome browser. Once I set the #siteWrapper height from 100% to auto, it then rendered at a much better scale.
(height 100% on a main wrapper is often used with sticky footers.)
网站可以识别移动浏览器并相应地生成输出，这通常是所需的方式。
Safari 将检测宽度和缩放以适合，但除此之外......
Sites can recognize a mobile browser and produce output accordingly, that's usually the desired way.
Safari will detect the width and zoom-to-fit, but beyond that...
您可以通过使用条件 CSS 来避免基于用户代理的不同页面。 Apple 实际上有一些关于创建网页的非常好的文档，可以支持 iPhone 上的 Safari 以及桌面浏览器。
我建议首先阅读 iPhone Web 应用程序人机界面指南。 这将为您使用条件 CSS 根据设备特征（例如屏幕尺寸）而不是用户代理自定义页面提供良好的开端。
You can avoid having different pages based on User Agent by using conditional CSS. Apple actually has some very good documentation on creating web pages that can support Safari on the iPhone along with desktop browsers.
I would recommend starting with reading iPhone Human Interface Guidelines for Web Applications. This will give you a good start in using conditional CSS to customize pages on the basis of device characteristics (such as screen size) rather than User Agent.