Response title
This is preview!
JQueryMobile - Change viewport on runtime
in jQuery Mobile
•
11 years ago
Hi,
I am using jQueryMobile 1.0b for Android platform
I want to dynamically change viewport metadata on run time. That is, I want to have different viewport on different pages. Certain page can be zoom while other cannot.
For example, index.html (no zoom) use
<meta id="viewport" name="viewport"
content="user-scalable=no, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, width=device-width" />
Then, if I click a jQueryMobile linklist at index.html, it will transit me to zoom.html. This page should allow user to zoom with
<meta id="viewport" name="viewport"
content="user-scalable=yes, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, width=device-width" />
The problem is jQueryMobile only recognize the viewport at index.html. No matter what I do on zoom.html viewport, it will not allow me to zoom.
I had also tried using javascript to change viewport when jquerymobile page before create take place. But it does not work too.
function set_scalable_viewport(){
//standard JQuery way
$("#viewport").attr("content","user-scalable=yes, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, width=device-width");
//alternative by DOM
//document.getElementById("viewport").setAttribute("content","initial-scale=2.0, maximum-scale=5.0, minimum-scale=1.0, width=device-width, user-scalable=yes");
}
$('#zoom-page').live('pagebeforecreate', function(event) {
//set viewport to scalable
set_scalable_viewport();
});
I want to maintain the ajax page structure while each page could have different viewport setting.
Any one can help me with this issue?
Thanks in advance.
1
