CODEWITHSUNDEEP
htmlcssiphonemedia-queries
Jimmery
Jimmery

Reputation: 10119

CSS Media Queries - Viewport Width being ignored by iPhone

I have this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

I have this CSS:

@media (max-width: 1100px) and (max-device-width: 1100px) {
    .wrapper {
        width: 200px;
    }
    .page {
        width: 100%;
    }

I have also tried the following css rules:

@media (max-width: 1100px) and (max-device-width: 1100px) {

and

@media only screen and (max-width : 767px) { .wrapper { width: 100%; } }

and

@media only screen and (min-width: 1024px) and (max-width: 1280px)

and

@media only screen and (min-width: 993px) and (max-width: 1024px)

None of these CSS rules work.

Its all being totally ignored on an iPhone.

But it works fine in a browser resized to iphone size.

Have a look for yourselves:

http://www.moonshineandfuggles.com/

Ive extended the max-width to ridiculous values to try and include iPhones.

I dont want the .wrapper to be 200px, I want it to be 100% and for it to take into account the width of the device.

It seems like the iPhone thinks it should make this page about 700ish pixels wide.

How can I make the iPhone realize I have made this site responsive so it adjusts to the correct size?

Upvotes: 0

Views: 997

Answers (1)

toonice
toonice

Reputation: 2236

The following has some information you might find useful of media queries -

What is the difference between "screen" and "only screen" in media queries?

My first recommendation is that you design the flow of your CSS to work from your smallest supported resolution outwards, such as designing your CSS file to support mobile devices and then using media queries to deal with changing the properties in your CSS file to support larger resolution windows / devices.

The following link explains the benefits of this more clearly than I am ever likely to - http://unmatchedstyle.com/news/working-with-media-queries-and-min-width.php.

Using this design approach makes it easier to deal with questions of specificity, which can occur when you try to use a media query to override an already defined property. One handy way of avoiding such conflicts I obtained from Media Query Styles Not Overriding Original Styles - note Adrift's usage of body.

You do not need to use media queries to override a property if you are not going to actually change it - e.g. you do not need to specify the width of wrapper in your media queries since it has already been defined in the main body of your CSS file.

As for your problems regarding width, try setting the width of body (or, failing that, wrapper) to 100vw if you are having trouble with 100%.

I hope that the above is not too confusing.

If you have any questions, then please feel free to reply.

Upvotes: 1

Related Questions