[CSS] Mobile webbrowsers load correctly but still no control over CSS

[donk]

Today I’ve started a mobile website project for my boss. It’s a landing page that should show after reading a specific QR code. Since I own a Samsung Galaxy SII and my boss only has an iPhone 4S there are some problems with the cross-over.

On my Samsung the website shows correctly in all my installed browsers, which are the default one from Android, Firefox Mobile, and Opera Mini. My boss’ browser on the iPhone (I recon that is Safari) either totally ignores all the CSS and shows only plain text, or sizes up the layout being unable to resize it correctly.

The design has totally been build on 450px width, with a max height of 600px. So it would show, correctly, on all mobile phones running either Android or iPhone. Still, only my Opera Mini shows it 100% as designed, both the Android browser and Firefox “zoom out” giving a way smaller font, and having to zoom in to have it to actual size. As said the iPhone browser of my boss just zooms in too much.

Any idea how I can solve/tackle this problem? I’ve tried CSS connects with media=”handheld” but that totally kills the CSS, so does media=”only screen and (max-device width:480px)” I’m out of idea’s how to solve it, what I did wrong, or what goes wrong. I’ve checked CSS-tricks search engine, Google and numerous guides on Smashingmagazine regarding mobile web design, but still no luck.

Website can be visited at: http://www.schaatsland.nl/qr

Keep in mind, website is in Dutch, and only the QR page is being designed by me. The real webshop (sadly osC) is designed by an other party.

Thanks in advance!

[TheDoc]

The URL works totally fine for me on my iPhone4 and a double tap zooms in perfectly.

I would recommend checking this out: http://html5boilerplate.com/mobile

[donk]

Hmm, odd. Althought, I gave it a second thought last night after dinner and thought the cause of the problem might’ve been the QR reader app being used on the iPhone 4. It’s possible that the QR reader has an own browser and therfor screws up the CSS.

I just tested the webpage again using a desktop smartphone simulator called Mobilizer and it all comes out as designed. I’ll really check out that template of boilerplate, maybe I can redesigned the webpage using it to solve future problems.

[donk]

Rebuilding the website using the boilerplate template solved the issue regarding the zoom problem.

[TheDoc]

Awesome!

[Author]

Posts