CODEWITHSUNDEEP
cssmobilemedia-queries
Dan382
Dan382

Reputation: 986

media queries for mobile optimisation

I've added the following to my site to target phones/tabets etc:

<link href="assets/styles/phone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 640px)" >
<link href="assets/styles/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 641px) and (max-width: 768px)" >
<link href="assets/styles/main.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)" >

The stylesheets clearly work as they dynamically change within the browser, however the mobile devices I've tested are still targeting the main stylesheet, not the mobile versions.

Any suggestions?

Cheers

Upvotes: 0

Views: 129

Answers (1)

Denny Mueller
Denny Mueller

Reputation: 3615

Apple Devices use min-device-width and max-device-width try to add

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

to your header.

Hope this helps

Upvotes: 1

Related Questions