Geek Answers Handbook

CSS Media request will not work

I keep trying to make a media query in my CSS document by doing something like:

@media screen and (max-device-width: 480px) { /*css here*/}

but this will not work when I test it on iPhone. I tried resizing and using portrait / landscape, but still nothing. What am I doing wrong?

+7
css responsive-design
source share
6 answers

I always call mine when I bind CSS in the head of HTML.

An example from the current page I'm working on:

 <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 320px) and (max-device-width: 500px)" href="css/mobile.css" /> <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 501px)" href="css/main.css" />

This selects a CSS document that will load from the very beginning instead of choosing styles after loading the CSS document (reduces the number of HTTP requests)

When doing this inside the CSS document itself, you usually need to replace max-device-width with max-width .

+4
source share

Make sure you have

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

in the title of your document

Good luck.

+37
source share

use "maximum width" instead of "max-device-width" , which is fixed for each device.

+3
source share

I'm not sure, but I think the max-device-width for iphone is 640 pixels. Give it a try.

0
source share
 @media only screen and (min-width : 480px) { }

It seems to work just fine on both Android and iPhone.

0
source share

this is an example css media query

 /************************************************************************************ smaller than 980 *************************************************************************************/ @media screen and (max-width: 980px) { your css here } /************************************************************************************ smaller than 650 *************************************************************************************/ @media screen and (max-width: 650px) { your css here } /************************************************************************************ smaller than 560 *************************************************************************************/ @media screen and (max-width: 480px) { your css here }

It’s hard to understand since you didn’t provide the code ... but the usual mistake people make without adding this metadata

 <meta name="viewport" content="width=device-width, initial-scale=1">
0
source share

More articles:


All Articles