If the title didn’t give it away, first a rant. In fact this entire post is going to be full of rant. BUT it is also going to be full of things that might make you less pissed off yourself the day you need to do this crap.
Browsers work under two principles, viewports and documents. A document or page, is just what it sounds, the content of a website from the top to the bottom regardless of how long or short the page is. But what about a viewport? Well, I define a viewport as “a port in which you view shit”. For example your computer screen is a viewport which physically limits what you can see because eventually things scroll off the end. Browser windows are viewports. When the page is too long, it offers scrolling so that the content that is physically inaccessible by the viewport can be brought into view.
I want to know who was responsible for the retarded idea that mobile browsers should have no concept of PROPER viewports (you will see in my demos why mobile browsers are half-assed). The damned things still have physical limits! The reason we consider viewports in web design is for anchoring objects to what you can see, not to what you cannot see. Take for example Tumblr’s button in the top right hand of the screen that lets you jump back up to the top of the page. That button works because it is bound to the viewport, not the document.
If you look at this blog on a Tablet or Phone, chances are the background image is positioned stupid and bad. That because until now I have never bothered to try and come up with any reasonable solution. Lets take a look at a project I was working on that forced me to solve this.
Continue to full post…