There were the two main display problems I was seeing:
- on iPad, the svg map in the middle of the page would methodically move down the page as completely unrelated div's had their content modified
- on my iMac, there would always seem to be too much space above the map and below the title bar; by making the window wider, this space would be reduced, but I could never make sense of why it wasn't obeying all my padding/margin stuff, and I didn't want to resort to absolute positioning
<svg preserveAspectRatio="xMidYMin meet" width="100%" height="100%" viewBox="0 0 55.22198 351.66797">
I don't know yet if this might cause other problems, but it is certainly a relief to learn that this can seem to help for what I am wanting.
The default value for the "preserveAspectRatio" attribute is "xMidYMid", which puts the thing in the middle both horizontally and vertically. This explains the desktop behavior I was trying to control in other ways. I have no idea why the iPad acted the bizarre way it did when "preserveAspectRatio" was not specified.
This O'Reilly Commons page has more (very nice) documentation on preserveAspectRatio.
-bfl
No comments:
Post a Comment