How to keep fixed width for layout viewport in android, iphone, using user-scaleable = yes; using jQuery Mobile
The site should have a flexible layout that matches the width of the device, in both portrait and landscape orientations. Here is my meto viewport tag:
<meta name="viewport" id="viewportid" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
The problem is when the user zooms in, the content streams are adjusted for visual viewing. I want the content to remain static. That is, the layout viewport is independent of the visual viewport.
How do I prevent content from flowing when scaling?
Thanks a lot for any help. It got worse like hell.
Below is an example of page enlargement (scale = 1) (Android 2.1 Emulator SDK)
Here is an example of the same page, zoomed in (Android 2.1 Emulator SDK)
source to share
I tried messing around with photoswipe and iScroll4 but I want the user to have a pinch and iScroll4 doesn't seem to work with Android Ver <= 1.6 as per testing I did in the Android Emulator SDK. I thought I could try something more suitable for my needs.
So AFAIK and I may be wrong, there is no way to track the zoom level in the view meta tag on android devices. JQuery Mobile doesn't have such a feature; maybe Sencha, Phonegap or some java java libraries make this easier and I would be more than happy to have you corrected!
Now, this is not the best method, but I realized that the accuracy appears to be within 1 or 2 pixels in the worst case. I wasn't sure if Android would change its scale in general to an orientation change event, but I gave my method to the shot and it worked.
Here's the code:
$(document).ready(function(){
var ViewportWidth = document.documentElement.clientWidth;
var LayoutWidth = document.documentElement.clientWidth;
$("#Index").css("width", LayoutWidth);
var SetLayoutWidth = function() {
LayoutWidth = Math.round((1/(ViewportWidth/LayoutWidth)) * document.documentElement.clientWidth);
$("#Index").css("width", LayoutWidth);
}
$(window).resize(function() {
ViewportWidth = document.documentElement.clientWidth;
});
$(window).bind("orientationchange", function(event) {
if (navigator.userAgent.match(/android/i))
if (Math.abs(window.orientation) == 90 && event.orientation == "landscape")
SetLayoutWidth();
else if (!window.orientation && event.orientation == "portrait")
SetLayoutWidth();
});
});
When the user zooms in, the width of the visual viewport changes, the value of which is retained. The ratio of viewport width to viewport width is, say, 0.8 after the user has zoomed in. Now when the user changes the device orientation, the ratio is divided by 1. To understand that the width of the layout viewport should be full screen, in this example I need to take 125% of the width of the visual view.
The only problem I know that can appear is that a resize event can trigger an orientation change event. I haven't seen this happen in testing, but I need to figure out how to resolve this if and when it does.
Thank.
source to share