Css width weirdness on mobile

HTML & CSS
1

Hi:

@media screen and (min-width: 501px) and (max-width: 800px) {

    #wrapper {
	width: 625px; /* was 775 then 675 now -25 from that - friggin weird */
	max-width: 625px;
    }
}
@media screen and (min-width: 150px) and (max-width: 480px) {

    #wrapper {
	width: 350px; /* was 450px */
	max-width: 350px;
    }
}

The above code worked just fine when I resized the browsers on the desktop but not perfect on some phones I tried. http://www.magicfixpc.com

The original 775px that worked on the desktop was down from the original 800px that I tried - looks like the vert scrollbar was being counted as part of the width.

My HTC Inspire has a 480x800 screen and the above code is what it took to get it to display right in either orientation. Notice I’m subtracting 150px in horiz mode and 100px in vertical mode. Not exactly a constant or even linear

<code>350/450 != 625/775</code>

Today a friend tried it on an SG III and it looked perfect in the screenshot he sent. That wass before I made the above changes. The SG III has a res of 720x1280. I guess the SG III was smart enogh to stretch it to fill the screen.

Before the change, on the default HTC android browser (webKit?) you couldn’t see the girl with the laptop. After the change, you could but firefox always looked bigger and it still does, it cuts her butt off right where the crease of her thigh stops. Sux cuase she’s kinda nice looking 8)

Any Ideas what the major malfunction is here?

TIA
Mike

2

With the caveat that I’ve never coded for @media… try these parameters and see what happens. They seem to work for me in Firefox on the desktop.


@media screen and (min-width:641px) and (max-width:974px) {
    #wrapper {
        width: 625px;
        max-width: 625px;
    }
}
@media screen and (max-width:640px) {
    #wrapper {
        width: 350px;
        max-width: 350px;
    }
}
3

I have no problem with firefox on the desktop. The problem is firefox is different than the default browser on the phone and the fact that I have to set css width to 350px to display on a 480px phone screen and all that other info/detail i put in my post. How would changing the @media min max ranges help?

4

Not surprisingly, I was out of the ballpark on your issue.

Perhaps this link will help: http://www.w3.org/TR/css3-mediaqueries/

Let us know how you resolve the problem. Curious minds want to know <smile>.

5

yup. right there in section 1. “Even illiterates have been calling you when they see your print ad. You don’t need a website. You also need to stop buying from sitepoint and especially refrain from posting there.”