I have created a mobile application using Jquery Mobile and I want to manually set values to viewport for each page. How this can be done.
Motive: Client is using website in mobile and when hi zooms page with fingers and If he goes to another page the zoom remains same. He wants if he browse other page it will open as default size.
Thanks in advance
Related
I've happily developed a mobile website using JQuery Mobile, and everything works beautifully except for a noticeable delay hiding the browser address bar on the homepage (around 5 seconds on iOS Safari).
AJAX transitions mean it's always hidden from that point on, but on the opening page the site logo is hidden for up to 5 seconds after the page has loaded, giving it a very unbranded and confusing feel for the user.
Can anyone think of any reasons for the delay / ways to speed it up? There are no large images loading on the page, putting an alert in the window load event fires way before the address bar is hidden and the setTimeout delays on the code firing in the JQuery Mobile code are only of the order of 20 ms.
Thanks in advance, Ted
I use Mobile Boilerplate's MBP.hideUrlBarOnLoad() and am not experiencing a five second delay.
Hide URL Bar
MBP.hideUrlBarOnLoad is used to hide the URL bar at the top of mobile
Safari on your iOS. Mobile space is limited and this helps to leverage
every pixel on the screen to maximize display area.
Sadly I've had to resort to a pretty hacky solution to this.
I've added a dummy 60px high spacer div at the top of the page, which pushes down the title, so it is visible at all times. This is then hidden by Javascript after 5 second setTimeout call, which is roughly equivalent to the delay we get on the url bar being auto-hidden by JQuery mobile.
This is only necessary on the start page, and other ones that we've had to load on rel="external" links, due to us making the error of mixing an ASP.net site that requires postback with JQuery mobile, but that's another story...
I've seen this happen when the content is Safari "Reader" compatible (when you see the "Reader" label next to the url on the url bar). I'm not sure but if this is the case maybe you could try to make your content less Reader compatible.
I am building a mobile web app that uses jQuery and hammer.js for touch controls. hammer.js has a feature called "prevent_default" which turns off Safari's scrolling/zooming/prettymucheverything. I have a page with a form using < input > for text fields, and a javascript listener that calls .focus() when you tap the form.
This all works well up until a point. The page is fixed in place and looks real pretty, and when you click on a form field it zooms in and the iOS keyboard appears. The problem is that when the user is done entering text, there is no way to zoom out. The browser is so zoomed in from .focus() that the browser bar is gone and you have to close the browser tab and re-type in the URL instead of refreshing.
I am looking for a way to force the browser to zoom out back to the initial view. I've looked all over the internet for some solution but have yet to find anything.
I have the viewport meta tags in the header to disable zooming from the beginning, but is not useful in solving this issue
A hacky solution is to focus and blur an inputfield after you have changed the viewport attributes.
function refreshViewportZoom(){
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'initial-scale=0.5, maximum-scale=0.5, scale=0.5, user-zoom=0.5, zoom=0.5');
document.getElementById('myInputField').focus();
setTimeout(blurLater,2000);
}
function blurLater(){
document.getElementById('myInputField').blur();
}
The blurLater is needed as a function, because Safari seems to look ahead and ignore it otherwise.
I have created bottom fixed tabs using jquery mobile data-role="navbar" inside a JQ footer. The issue is it creates a div on runtime outside the page flow which is absolute, more than the height of the page content. This is getting created on runtime and appears only when the navbar code is written. Need some help on it.
First, are you viewing the website on a mobile device (and which mobile OS if so).
This issue has appeared in my experience, but only when using a standard web browser.
I loaded the Like Box iframe code generated on Facebook into an UIWebView on my iPhone App. It works well, but when I scroll, it scrolls the UIWebView itself, and not the content inside the iframe. How can I block the UIWebView from scrolling (i.e the UIWebView takes the fullscreen frame) and allow the overflowed content of the iframe to scroll instead ?
ps : I tested a simple .html in MobileSafari.app and I have the same problem
You use two fingers in the like box instead of one. Then it scrolls.
You won't have much control over a plugin that is rendered as an iframe due to cross domain restrictions and they do not give many options to customize the appearance.
You could replace it with a Facebook like button. Then below it, you could add code that reads and displays the Fan Page feed using the graph api's page's feed connection (/pageId/feed). This would give you full control over the rendering and still gives the user the option to like your page. To improve performance of this solution you could use the Facebook real-time updates API to get notified when new updates get posted to the page and then you could pull those down and cache them.
I have a page that is straight from the jQueryMobile site. I'm including a table of names, but on the iPad, it doesn't allow the user to pinch the screen size.
Please refer to this answer:
http://forum.jquery.com/topic/problem-with-the-zoom-on-ipad
In short, jQuery Mobile injects a fixed viewport size into the page.