position:fixed not working on mobile, works on desktop - javascript

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

Related

Web site causing browser to find the "wrong" screen width

I have mobile optimised several sites in the same way using media queries - most are working fine on phones but two insist on always detecting a screen.width of 800px, no matter how small the actual device is.
Working correctly:
www.accountex.co.uk, www.legalex.co.uk, www.takeawayexpo.co.uk, www.streetfoodlive.co.uk
Detecting wrong screen size but only on mobile devices:
www.greatbritishbusinessshow.co.uk, www.bstartup.com
Even though the methods used are almost identical. The above two show correctly on all online mobile simulators, BUT use the media query for a screen width of 800px when loaded on actual mobile devices even when the device is 320x480 or otherwise very small.
Using console.log or alert these two sites always return 800px as the when alert(screen.width) is invoked - no idea how this can happen on a tiny device!
Thanks for your help!
use this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">

Redirect to mobile page when width is too small

Since my website doesn't look good at all on a small screen, I want to create a JS function that redirects me to a mobile version of the page when width of the screen is smaller than or equal to 800px.
Here is the code for it:
if (screen.width <= 800) {
document.location ="index_mobile.html";
};
If the code works, then when I shrink down the browser window to 800px wide, the index_mobile.html should show up. But it is not showing up right now. Does anyone know what's going on?
http://jsfiddle.net/RZMmV/
Mobile browsers do not report or use the real device resolution because this would make basically all websites on the internet unusable.
What they do is creating a "virtual screen" that has a resolution that is closer to the resolution of a desktop PC and then will implement zooming on the page.
If you want to know the real device resolution you need to disable automatic scaling done on the device. For example for iOS and Android devices this can be done adding
<meta name="viewport"
content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
to the <head> section of your page. This informs the browser that the page has been designed for handling low-resolution devices and disables the virtual screen layer.
screen.width will return the width of the monitor, not the window, so you can't just shrink your browser window down to get a different value. To do that, you'll want to use window.outerWidth or something.

iPad orientation issue on a web page

I developed a web page for PC and I wanted it to be compatible for iPad as well. However I did not do specific additions to my page for iPad compatibility. I only added the meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1;" />
When I view the site in iPad landscape mode, on the page load, it looks good. But when I switch to Portrait mode, the page looks cut off. When I switch again to landscape mode, the page looks cut off still further.
What other practices should I follow to make my page iPad compatible.I'm looking for recommendations/best practices on using %widths and things like that.My elements are currently of maximum 954px. Should I necessarily use % widths for iPad compatability? Any other helpful tips?
initial-scale=1.0 means your page will load 'full size' which is too wide in landscape mode. If you use that meta tag, you would usually use it in combination of sizing the page width to the exact dimensions of the screen. Since you are not, I would not use that meta tag at all and let the iPad's browser load the page normally (the browser will handle fitting it to the screen for you).

Best method to determine if viewport or 'standard' browser

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/

JQueryMobile HTC Android pinch zoom

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.

Categories