如何使我的字体大小在各种设备上看起来都很好？ UIWebView 中 iPad 和 iPhone 的不同视口

发布于 2025-01-02 04:55:57 字数 397 浏览 0 评论 0原文

我有一个包含大量文本和几张图片（如新闻文章）的页面，我希望以适合平板电脑大小的设备和手机大小的设备的方式显示它们。

我现在所做的就是使 Scale to Fit = YES 并使我的 html 具有元标记，

<meta name='viewport' content='initial-scale=1.0, maximum-scale=10.0'/>

但在 iPad 上字体大小确实太小了。我尝试通过设置initial-scale=2.0来解决这个问题，但现在它在iPhone甚至Galaxy平板电脑上看起来很大。

如何处理不同的设备尺寸并让字体大小以在所有设备上看起来都不错的方式显示？

也许更好的问题是如何在放大后使 UIWebView 再次换行？

原文

I have a page with a lot of text and a couple pictures (like a news article) that I want to display in a way that looks good for both a tablet-sized device and a phone-sized device.

What I do right now is make Scale to Fit = YES and have my html have the meta tag

<meta name='viewport' content='initial-scale=1.0, maximum-scale=10.0'/>

but the font size is really too small on the iPad. I tried to resolve it by making initial-scale=2.0 but now it looks huge on the iPhone and even on the galaxy tablet.

How can I deal with varying device sizes and have the font size appear in a way that looks good all on devices?

Perhaps a better question is how can I make UIWebView wrap-text again after I zoom in?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深巷少女 2025-01-09 04:55:57

我会将比例保持在 1.0 不变，但一旦大屏幕上有更多可用空间，就会增加文本大小。您可以使用 css 媒体查询来实现此目的：

@media screen and (min-width : 768px) {
    /* Styles, for example to increase font size */
    body { font-size: 120%; }
}

当在屏幕宽度 > 的设备上显示时，这会将正文字体大小增加到 120%。 768（iPad 纵向宽度）。当然，您可以针对不同的宽度使用多个这些规则。

W3 有官方的媒体查询规范。

I would keep the scale the same at 1.0, but increase the text size as soon as there is more space available on larger screens. You can achieve this using css media queries:

@media screen and (min-width : 768px) {
    /* Styles, for example to increase font size */
    body { font-size: 120%; }
}

This will increase the body font size to 120% when displayed on a device with a screen width > 768 (iPad portrait width). You can use multiple of these rules for different widths of course.

W3 has the official Media Queries specification.

回复收藏 0 原文

~没有更多了~