Safari text reflow/formatting revisited
About a year ago, I asked about problems with web pages' text formatting and/or reflow in Safari, and didn't really get an answer. The problem has gotten worse with the advent of iPhones with different screen resolutions (320x480, 640x960).
The problem is that web pages from several sites I'm working on are rendered on the iPhone by Safari in either a tiny unreadable font, or if you resize the screen, a legible font but a "window" that's much wider than the screen, requiring left-right scrolling to read. Users find this really unacceptable, of course, and want it fixed.
When I asked before, the proposed solution was "<meta name="viewport" content="width=320">" in the page's <head> section. This sorta worked, but has the problem that when you rotate the phone, you get the text in a huge font, and shrinking it is simply undone by Safari.
But we now have clients with the newer iPhones, and the above semi-solution doesn't work very well for them at all. So I'm trying to learn whether there's a solution now. Is there a way to get Safari to render web pages with the text at a font size chosen by the user, and "flowed" to fit the iPhone's screen width, whatever it is?
The weird thing here is that this is something that most browsers have done from the start. The main design goal of the original HTML over two decades ago was handling different-sized screens (or windows). The very first browsers (Mosaic, etc.) did "flowing" of the text to fit whatever size window widget they were running in. If you resize a browser's window, all the others I know of will quickly reflow the text so it's the same font size and fits the new window size.
But iPhone's Safari seems to stand alone in not doing this. It formats the text for a window much larger than the screen, and then shrinks it to fit the current width (i.e., portrait/landscape mode).
But is this actually true? Is there some way to tell Safari to do the usual sort of formatting to fit the current screen size and shape/layout? The <meta> tag doesn't do this, and has the problem that it can't know the size of the client's screen, which is no longer the same on all iPhones.
Googling turns up a lot of questions and complaints about this, but no solutions. My earlier question also stands unanswered. But it's more of a problem now, with more than one iPhone screen resolution in users' hands.
(And why does the Apple Discussions input form want to know my Macbook Pro's OS level? This is a question about iPhone software, and our web pages aren't delivered by my Macbook Pro, even if I do develop a lot of them there. 😉
The problem is that web pages from several sites I'm working on are rendered on the iPhone by Safari in either a tiny unreadable font, or if you resize the screen, a legible font but a "window" that's much wider than the screen, requiring left-right scrolling to read. Users find this really unacceptable, of course, and want it fixed.
When I asked before, the proposed solution was "<meta name="viewport" content="width=320">" in the page's <head> section. This sorta worked, but has the problem that when you rotate the phone, you get the text in a huge font, and shrinking it is simply undone by Safari.
But we now have clients with the newer iPhones, and the above semi-solution doesn't work very well for them at all. So I'm trying to learn whether there's a solution now. Is there a way to get Safari to render web pages with the text at a font size chosen by the user, and "flowed" to fit the iPhone's screen width, whatever it is?
The weird thing here is that this is something that most browsers have done from the start. The main design goal of the original HTML over two decades ago was handling different-sized screens (or windows). The very first browsers (Mosaic, etc.) did "flowing" of the text to fit whatever size window widget they were running in. If you resize a browser's window, all the others I know of will quickly reflow the text so it's the same font size and fits the new window size.
But iPhone's Safari seems to stand alone in not doing this. It formats the text for a window much larger than the screen, and then shrinks it to fit the current width (i.e., portrait/landscape mode).
But is this actually true? Is there some way to tell Safari to do the usual sort of formatting to fit the current screen size and shape/layout? The <meta> tag doesn't do this, and has the problem that it can't know the size of the client's screen, which is no longer the same on all iPhones.
Googling turns up a lot of questions and complaints about this, but no solutions. My earlier question also stands unanswered. But it's more of a problem now, with more than one iPhone screen resolution in users' hands.
(And why does the Apple Discussions input form want to know my Macbook Pro's OS level? This is a question about iPhone software, and our web pages aren't delivered by my Macbook Pro, even if I do develop a lot of them there. 😉
Macbook Pro, Mac OS X (10.5.8)
