I created a sample script to add and remove metatags from the head. But Android 2.2 doesn't seem to respect it's removal. However it does respect the addition of the metatag on click for example.. How do I get it to respect the removal of the tag and revert to the default viewport through javascript?
<script type="text/javascript">
$(document).ready(function(){
function initMeta(){
var headID = document.getElementsByTagName("head")[0];
var metaNode = document.createElement('meta');
metaNode.name = 'viewport';
metaNode.content = 'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0';
metaNode.id = 'metatag';
headID.appendChild(metaNode);}
function closeMeta(){
$("#metatag").remove();}
$("#add").click(function(){initMeta();alert("meta opened");});
$("#del").click(function(){closeMeta();alert("meta closed");});
});
</script>
<input name="add" type="button" value="add metatag" id="add"/>
<input name="del" type="button" value="delete metatag" id="del"/>
I note this behavior in iOS Safari too.
You are actually removing the meta tag (verifiable through DOM - Try alerting $("#metatag").length after removal)
The problem is the viewport itself does not respond to the absence of content in this tag. If you update the contents or re-add the meta tag with new contents, you should see it manifest on your screen. But by simply removing the meta tag, the UA seems to think "No change necessary" as it's not getting any explicit instructions there.
Hope that helps! Your question / example helped me realize this was even possible!