Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #36268
    donk
    Member

    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!

    #95268
    TheDoc
    Member

    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

    #95297
    donk
    Member

    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.

    #95313
    donk
    Member

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

    #95322
    TheDoc
    Member

    Awesome!

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.