CSS Media Queries - Viewport Width being ignored by iPhone

Question

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?

@Jimmery you can just reset your `.wrapper` for mobile devices as `@media only screen and (max-width : 767px) { .wrapper { width: 100%; } }` *PS: `max-width` can be as per your requirement* — vivekkupadhyay, Oct 06 '15 at 12:34
@Jimmery not possible, I've checked it on, are you sure you've tried the same? Please check this [**Image**](http://postimg.org/image/j4fwnaofj) — vivekkupadhyay, Oct 06 '15 at 12:42
@vivekkupadhyay it doesnt work on an iphone - like I said before, "Works fine in a browser resized to iphone size." — Jimmery, Oct 06 '15 at 13:43

score 1 · Answer 1 · edited May 23 '17 at 12:14

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.

thanks for the answer - could you please confirm for me if this site (http://www.moonshineandfuggles.com/) looks the same for you on an iphone as it does on a browser shrunk down for an iphone - most particularly can you scroll left or right on either the iphone or on a shrunk down browser. many thanks — Jimmery, Oct 06 '15 at 14:40
Sorry for the delay in answering - I have really bad reception here. Unfortunately there seems to be a difference between the browser / device emulator and actual devices. My android phone displayed items three toa row rather than the browser-suggested 1 item to a row. I am researching this now. From what I can tell this is a commonly encountered problem concerning device-width, viewport width and the like. It could take me a while to work up a solution owing to the bad reception and that I do not currently have a site I can experiment with. I'll post here again if I find something. — toonice, Oct 06 '15 at 15:17
Thank you so much for looking into this! But yes, you have described the exact problem Ive been having with the site - as you say the browser puts 1 item per row, but its 3 items per row on a mobile phone when it should of been 1 like the browser. If you do find out what the problem could be I would be very grateful as this is very frustrating for me - and many many thanks for putting up with the bad reception on my behalf, i know how frustrating that can be! — Jimmery, Oct 06 '15 at 15:22

CSS Media Queries - Viewport Width being ignored by iPhone

1 Answers1