How to lock zoom on iPad for full page width in both orientations?

Question

I've got a page with a fixed width (1040px). For various reasons I need to have zoom locked on iPad to show the full width of the page in both portrait and landscape modes.

I have an event handler triggered on orientationchange which includes the following code:

if (isLandscape) {
    viewportMeta.content = 'width=1024,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0';
    console.log('--> landscape');
}
else {
    viewportMeta.content = 'width=768,initial-scale=0.75,minimum-scale=0.75, maximum-scale=0.75';
    console.log('--> portrait');
}
console.log('viewportMeta.content:');
console.log(viewportMeta.content);

This code works fine for the initial page rendering and even if I reorient the device during the page rendering, but if I reorient the device after the page is rendered, it fails miserably: the landscape page is scaled at 0.75 and the portrait page is scaled at 1.0.

I'm reading on this old page (how applicable?) that

Unfortunately a bug, or more likely a mis-feature, in mobile safari messes this up when a device is rotated from portrait to landscape mode. initial-scale is honoured only on full page load.

What do I need to do to get mobile Safari to respect the new zoom on rotation? Do I have to force a re-render somehow?

Answer 1

It turns out the solution to my problem was much simpler than I had expected, and I don't even need javascript. (The existing code I'm working with raised my expectations.)

I need only set the width and the iPad automatically takes care of the scaling:

<meta id="viewport" name="viewport" content="width=1040,user-scalable=no">

BONUS: I tried this with Android and it doesn't work. In that case one needs to set the scale in javascript.