如何在各種設備上使字體大小看起來不錯？ UIWebView中iPad和iPhone的不同視口

Question

我有一個頁面，其中包含很多文本和幾張圖片（例如新聞文章），我希望以一種既適合平板電腦大小的設備，又適合手機大小的設備的方式顯示。

我現在要做的是使Scale to Fit = YES，讓我的html具有meta標簽

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

但是iPad上的字體大小確實太小。 我試圖通過將initial-scale = 2.0來解決它，但是現在它在iPhone甚至銀河平板電腦上看起來都很大。

如何處理不同的設備尺寸，如何使字體大小在所有設備上看起來都不錯？

也許更好的問題是放大后如何再次制作UIWebView包裝文本？

Answer 1

我將比例尺保持在1.0，但是一旦較大的屏幕上有更多可用空間，就增加文本大小。 您可以使用CSS媒體查詢來實現此目的：

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

當在屏幕寬度> 768（iPad縱向寬度）的設備上顯示時，這將使主體字體大小增加到120％。 當然，您可以將這些規則中的多個用於不同的寬度。

W3具有官方的“ 媒體查詢”規范。