I have an iPad application that displays email newsletters. This HTML content is pulled and embedded inside a WebView. Most newsletter widths are 650px but some are around 900px.
By default, they display too small (iPad device width is 768px) so I want to make it zoom to fill the page (I am concerned with the width only - vertical scrolling is ok).
Using the viewport meta tag, if I hard-code 650px as the device width, it will cut off the 900px-wide newsletters. Also, setting an explicit width disables resizing the viewport:
<meta name="viewport" content="width=650, initial-scale=1">
However, if I set it to variable device-width, the campaign is 'squeezed' by the screen and displays off-center:
<meta name="viewport" content="width=device-width, initial-scale=1">
Is there a way to dynamically specify the width, so that it sets it as 650 if the campaign is <= 650, and 900 otherwise? In essence, I'm trying to set a fixed viewport dynamically based on the newsletter width. Could I use the @viewport CSS rule instead?
I ended up resolving this issue using the strategy from my other similar question:
Stretch/Fit HTML Template and Children to Window
Instead of changing the viewport meta, it turned out better in my case to dynamically scale the newsletters using JS once they were loaded.