I have one website with JQueryMobile which works fine for iPhone but with Android HTC looks really weird when zooming. Same thing happens in any of the demo pages of JQueryMobile site, almost half of the screen becomes blank breaking completely the site.
Is there any way of solving this or at least disable pinch zooming for Android HTC Browsers?
The problem you are facing is likely caused by the HTC non-standard android browser. You cannot use the viewport meta tag to prevent pinch zooming. Also the zooming causes the layout to be recalculated (page dimensions are changed) which I assume is what is causing your issues. Unfortunately it doesn't seem like there is a solution for this problem at this time, but it only affects HTC phones.
Try using the viewport metatag.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Two ways to solve it, either disable jQueryMobile or recode the desired functionality. The goal of jQueryMobile is to provide the same functionality for a variety of mobile browsers, however that statement doesn't include performance at all - and most likely never will since the difference between different mobile devices' perfomance is geometrical; that's why you really can't have a write once, run everywhere type of library for mobile. Unless you degrade your high-end experience to feature phone level, that is. I'm willing to go as far as calling this mentality a fundamental flaw in jQueryMobile.
Also, you should know that Android is generally worse in supporting fancy animations and such than iPhoneOS. Yes, it can do the same things but not as smoothly and there's lots of weird clipping/page position jumping errors and whatnot in the animations.
Related
None of the questions on the subject has any real answer (I've
seen one that says "Just stop the zoom altogether!" and the other that
says "Set the width!" (which isn't the case))
I have a web application that's supposed to work on mobile (Mobile Chrome only is enough). Pinch-to-zoom is a must-have feature.
It all works well, except for the control buttons I have. Standard buttons, fixed position at the bottom left of the page.
When I pinch-to-zoom, those buttons, while remain on bottom left, grow along with the zoom.
Is it possible to have those buttons not grow by zoom somehow?
Here is a potential fix and good read if you are running into this problem.
Here is the website, css fixed position.
How my prototype works
What I’m doing is calculating the zoom level (poorly) with JavaScript
and then applying CSS transforms to scale the fixed element back down
to normal size. As you might expect there is no smooth transition
during zoom. There are a whole host of bugs and edge cases. I’ve not
even attempted cross browser support (hence no code).
This does not seem to provide a script but it gives you the idea of what to do and how to accomplish it.
Another link on this site seems to have a bunch of great info about your problem, more of a proposal.
Here is the website, position: device-fixed;
The only other option I currently know of is disabling zoom. This is not the best approach but is what I currently do if a mobile design needs a fixed header. This will prevent the user from zooming which will then prevent the element to be affected.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I have a div that is anchored to the bottom of a page (position: fixed), works fine in a normal browser, but on mobile browsers (iphone, android, & WP7) it appears offscreen. If i zoom in then zoom out on mobile, i can see the div reposition itself to where it thinks the bottom is. It would be great if somebody would give a quick fix or point me in the right direction, but really im looking a good reference on the difference between how mobile browsers handle coordinates and desktops.
Mobile browsers by default try to trick the rendering engine into thinking that the browser window has a more computer-like size.
This is needed because otherwise most web pages would be totally unusable on mobile devices with limited resolution (especially phones).
You can however use special tags to tell that the HTML page has been indeed designed for this kind of device, thus disabling all scaling and resolution virtualization logic in the mobile browser.
Something that can for example fix the problem for iOS devices and android devices is adding
<meta name="viewport"
content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
This tag in the <head> section will allow your page and javascript code to deal with real device pixels and screen size.
Define "mobile browsers". Android browser supports it, Safari for iOS supports it from iOS5.
Opera mini and others maybe doesn't support position:fixed.
You could check this... http://seesparkbox.com/foundry/fix_your_position_even_in_ios_4
We are making some JavaScript games. They run perfectly on iPhone and iPad and desktop as well. The biggest problem are Android devices. All tablets we have with Honeycomb OS 3.x (Samsung Tab 10.1, Motorola Xoom, Acer Iconia, etc.) are extremely slow when JavaScript is executed and content is rendered. It is better on 2.x phones, but still far behind Apple devices…
We tried to use the traditional approach with div element as well as HTML5 canvas, but even simple bouncing ball example is extremely slow (If you want to test it, access http://sie.mautilus.com/canvas).
If we disable in the debug menu on Android the Enable OpenGL Rendering it is slightly better, but still not usable for wide audience, not speaking about the fact, that normal user will not do this…
This makes the JavaScript based user interface, which is event bit complicated totally unusable on Android…
How it is that the simple bouncing ball, which was running in MS-DOS on my Intel 386 machine is unusable on high-end tablets with dual-core 1 GHz Cortex-A9 CPUs?
See also there:
http://code.google.com/p/android/issues/detail?id=17353
http://groups.google.com/group/phonegap/browse_thread/thread/fc13b40165db8a00?pli=1a
Regards,
STeN
You are correct that it's very slow on android devices, i ran into the same problem and searching the internet I only find people that agree with us.
I did a few things to speed things up (although it comes with lower quality). I also only checked on HTC Sensation and Samsung galaxy tab 10.1. I do think that you will need to use different settings for different phones.
set the screensize so my phone doesnt create a bigger canvas and then scale it down again.
scale up the scene by factor 2. This will cut the used pixels in halve, so you have actually a smaller canvas stretched over the full screen
dont use clearRect to clear the entire canvas and then redraw everything. Actually removing the clearRect at your bouncing ball example will show a lot of improvement. Clearing the areas that actually change (bats and ball) and then redraw it will be enough.
On a side not I noticed that android 2 and 4 perform faster then 3, but that is based on testing with just 3 devices, so not hard stats.
I also read that using translate3d on a canvas will trigger hardware rendering if available, but I havent checked/confirmed this.
Some code that might help you:
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no"/>
$(gameEl).css('-webkit-transform', 'scale3d(2, 2, 0) translate3d(0, 0, 0)');
$(gameEl).css('-webkit-transform-origin', '0 0');
From looking around on the net, my understanding is that fixed positioning should work in Android 2.3 if one has the right meta tags set.
This is what my current viewport settings are.
<meta name="viewport"
content="width=device-width,
height=device-height,
initial-scale=1.0,
maximum-scale=1.0,
minimum-scale=1.0,
user-scalable=no" />
On my Galaxy S2, the div with fixed position (basically it's a thin header at the top of the page) does not stay in place when scrolling down the page. It moves with the page.
However, when you stop scrolling, it will jump to the top of the page again.
Is that the expected fixed position behaviour for Android 2.3?
Is there a better way to do this (which hopefully doesn't involve the massive complexity of addiong iScroll)?
I've just been having a look into this issue myself as part of a project we are doing: the S2 does not appear to fully support position:fixed, instead it emulates it by snapping the object back in place once the scrolling is completed (which is how we are handling it, with JS, for handsets which do not support position:fixed).
I've no idea why this is, as all the other Android 2.3 devices we have tested do support it fully with no issues, but you're not the only one having problems!
Here is another thing that breaks position:fixed on Android 2.3
anything{
-webkit-transition:none !important;
}
It only breaks when you use !important. Which sucks because
anything{
-webkit-transition:anything;
}
Makes elements invisible. Hope this helps!
There is an excellent comparison and discussion by Brad Frost of fixed positioning for Android, iOS, Firefox Mobile, Opera Mobile, Blackberry, Windows phone and more here.
So, by now we all know that iOS mobile Safari uses viewports (as does Android browser), rather than a 'standard' browser window. And this causes issues with overflow:hidden, and position:fixed.
This unfortunately is the same case with the iPad. I presume this is the case for other Android tablets too.
Rather than browser sniffing each time, is there an easy way to determine if the browser has a viewport or if it is standard?
Unfortunately, there's currently no good fix for mobile browsers' lack of support for position:fixed. The reason position:fixed is "broken" in the first place is because—among other things—no browser vendor knows exactly how to handle what happens when zooming in on the document. If you have some time to do some reading, I highly recommend the following articles, which will explain browser viewports and the problems surrounding fixed positioning on mobile in great, painstaking detail:
A tale of two viewports – part two — how viewports work and the problem of mobile browsers. (If you're not familiar with viewports in desktop browsers or want the background info, see also part one.)
The fifth position value does a fantastic job of explaining the problems surrounding position:fixed in a mobile browser, and suggests we might need a new position value – device-fixed.
Those articles will give you the why, but not the how to fix it. For a truly fixed position, you're mostly out of luck. However, if your goal is to have a fixed toolbar below scrolling content, there are a few ways to hack it. I've had success with iScroll.
Edit: The correct way to determine if you are running on a touch-based device is the following feature detection:
var isTouch = ('ontouchstart' in window);
ontouchstart is an event fired in mobile Safari and the Android browser. It is not present on desktop browsers, where you can just use overflow:auto and have regular scrollbars. If isTouch is true, you can then use iScroll.
Try media queries: you can include stylesheets, or apply parts of a stylesheet conditionally, based on the device and viewport dimensions the browser reports.
This article gives a decent enough introduction: http://www.alistapart.com/articles/responsive-web-design/