Reactive not working on iPhone

[Cocky]

Hi
I’m trying to make our website reactive and have had some success – It’s working in full screen and for tablets, but I can’t seem to get it working on mobiles. The web address is: http://www.computersnt.com.au
HTML Meta:
<meta name=”viewport” content=”width=device-width, inital-scale=1.0″>
Media:
@media screen
and (max-width: 375px){}
@media screen
and (max-width: 980px)
and (min-width: 376px){}
The above works in Dreamweaver for full screen, tablets and mobile, but when I upload it, it works in full screen and tablet, but iPhone/mobiles show the tablet version and not the mobile version. It’s almost like it’s ignoring the media query for the mobile.
I’m just starting out in web design, so would really appreciate it if someone could point out where I’m going wrong.

[I.m.learning]

I don’t see your viewport meta in the head.

Know you can put your media queries inside your main style sheet.

Also, some have added the

<meta http-equiv="X-UA-Compatible" content="IE=edge">

to their pages.

I set my max-width at 990 for my media queries to combine tablets and smaller into one query.

Chris posted this about media queries, maybe experiment with changing the media query sizes. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

[Cocky]

Thanks Chris, appreciate your help!

[Author]

Posts