Auto resize object state on click when already zoomed on page

Question

I have a page that contains a large, detailed graphic with multiple buttons you can click to open various hidden states of additional information. As there are so many buttons you can click, when viewed on a mobile phone, a single finger press, may inevitably be difficult for some users. It's a busy, but nessecary graphic. Ah ha, I can pinch zoom into the graphic, and view the buttons and the graphical content in much greater depth. Sorted! however now when I do click a button, the new object state that pops up, is now already zoomed into at the degree Ive used to view the original page graphic. Not great.

How can I set the new object state, to force itself back to 100% normal zoom state when being triggered?

thanks

Answer 1

in5 would allow you do something when a state changes as it generates a newState event that you can listen for.

I'm not 100% sure you can reset the user zoom, but if you can, this code might do it.

$(function(){
	$('.mso').on('newState', function(e){
		var $vp = $('meta[name="viewport"]');
		var stored = $vp.attr('content');
		$vp.attr('content', "initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0");
		setTimeout(function(){ $vp.attr('content', stored); }, 50);
	});
});

You can add it via the Resources section.

Source:
https://stackoverflow.com/questions/44599800/reset-viewport-zoom-on-ios10-with-javascript

Note that it may not work in the iOS Simulator, but should work on an actual device.