Response title
This is preview!
viewport problem while ajax loading
in jQuery Mobile
•
11 years ago
In my index.jsp I have a page named "abc"
index.jsp has viewport meta
<meta id="viewportMeta" name="viewport" content="width=device-width, initial-scale=1.0">
- //index.jsp
- <html>
- <head>
- // viewport meta and other js
- </head>
- <body>
- <div data-role="page" id="abc">
- <a href="def.jsp?url=/file/test.html">test</a>
- </div>
- </body>
- </html>
but in my def.jsp I did not keep any viewport meta since that makes problem in iphone
in my def.jsp I have an iframe where I want to load the test.html. iframe's height is calculated on the fly
when document is loaded in it.
- //def.jsp
- <%@page language="java" contentType="text/html; charset=UTF-8"%>
- <%
- String url = (String) request.getParameter("url");
- %>
- <html>
- <head>
- // viewport meta is not given here
- //jquerymobile css and js
- </head>
- <body>
- <div data-role="page" class="def">
- <div data-role="content" id="main">
- <iframe id="iframeCon" src="<%=url%>" width="100%" frameBorder="0"></iframe>
- </div>
- </div>
- </body>
- </html>
Everything works fine if ajax support is kept off.
But if ajax support is turned on then when I click on the url in abc.jsp
I find jquerymobile fetches my "def" page's div into the index.jsp.
As a result test.html is rendered with the viewport defined in index.jsp. In PC or ipad it does create
any problem. But in iphone it creates a major problem. Since my texts are rendered with different scale
defined in index.jsp.
What I need is either to load def.jsp fully [of course with Ajax] or to change the viewport meta before rendering or page creating.
I found someone suggested to try to change the viewport before page show.
I tried to change the viewport meta on pagebeforeshow and trigger the pagecreate event but it did not help me out.
- var nonZoomablePagesIDs = ["def"];
- jQuery('[data-role=page]').live('pagebeforeshow', function() {
- var curPageID = jQuery(this).attr('id');
- var curMeta = jQuery('#viewportMeta').attr("content");
- if ( jQuery.inArray(curPageID, nonZoomablePagesIDs) != -1 ) {
- curMeta.parent.remove(curMeta);
- }
- jQuery(this).page().trigger('create');
- });
Can somebody suggest a way?
Best regards.
1