How to correctly write CSS/HTML Media Queries in Document Head


I'm trying to put together a single page, text only HTML document that is responsive. I'd prefer not using an external stylesheet is this is something that will be sent around to various places. Keeping it to one file is easiest in this case.

I am having trouble with the media queries for screen sizes. They work fine on a desktop when I resize the window. They do not work when I look at the page on a mobile device. I've tried a samsung galaxy S4, an IPhone 4 and an iPad. All devices are showing the red background that is only supposed to show for a min width of 769 px.

file attached or you can look at

Any help is greatly appreciated

<!doctype html>
<meta charset="utf-8">
<title>Test HTML5 and Media Queries</title>
/*media queries*/

@media print {
	body {
		font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	h1 {
		font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
@media screen,handheld {
	body {
		font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
		width: 80%;
		 max-width: 960px; 
		 margin: auto;

@media all and (max-width: 480px) {
body {font-size: 3em; background-color: green;}

@media all and (min-width: 481px) and (max-width: 768px) {
	body {font-size: 1.75em; background-color: yellow;}

@media all and (min-width: 769px) {
	body {font-size: 1.2em; background-color: red;}

h1 {
	font-size: 2em;
	margin: 2em 0;

h2 {
	margin: 1.25em 0 0 0;

header p, .header {

p {
	margin-top: 0px;

aside {

<h1>This is the Title of the Document</h1>
<p class="header">Some info about the document <time datetime="2013-09-17">September 17, 2013</time>.</p>
<h1>Article 1</h1>
<aside><p>an overview of this article for people who don't want to read all the details</p></aside>

      <p> Lorem ipsum sit amet, consectetur adipiscing elit. Pellentesque et   ligula diam. Vestibulum cursus posuere ante vel pulvinar. Praesent   vitae tincidunt lorem, et posuere dui. Vestibulum a turpis aliquam,   fringilla nibh eget, congue magna. Morbi feugiat arcu ut ante aliquam,   in facilisis neque pulvinar. Mauris blandit et tortor nec viverra.   Nullam eleifend lobortis gravida. Mauris nec tortor molestie, rutrum   eros quis, mattis magna. In id turpis sem. Donec suscipit nibh euismod   turpis mattis tincidunt. Quisque lobortis magna ut sem dignissim   sagittis. Sed rutrum magna vitae augue pellentesque tincidunt. Integer   fermentum diam augue, quis varius ante semper et. Nullam sit amet porta   tellus. Ut aliquam sodales elit id faucibus. Duis libero diam, laoreet   ullamcorper turpis quis, facilisis placerat enim. </p>
      <p> Curabitur accumsan a sem quis tempus. Aliquam orci diam, eleifend   laoreet porta ut, tempus et urna. Ut sodales, leo posuere semper congue,   sem velit pellentesque tellus, ut consequat urna orci at nisl. Integer   suscipit dolor turpis, quis consectetur est blandit at. Duis id risus eu   velit venenatis venenatis pulvinar eget risus. Maecenas sem arcu,   consequat quis urna tincidunt, sollicitudin tincidunt metus. Maecenas   eleifend imperdiet velit vel feugiat. Aliquam erat volutpat. </p>
    My Name<br>
    555 Some <abbr title="Road">Rd.</abbr><br>
    Some Town, <abbr title="Massachusetts">MA</abbr><br>
    <abbr title="United States of America">USA</abbr>, 01230


Open in new window

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
See how this works on screen and mobile

I added the below code from suggestion
/* high resolution screens */  
@media (-webkit-min-device-pixel-ratio: 2),  
             (min--moz-device-pixel-ratio: 2),  
             (min-resolution: 300dpi) {  
  header { background-color: purple; }  
/* low resolution screens */  
@media (-webkit-max-device-pixel-ratio: 1.5),  
             (max--moz-device-pixel-ratio: 1.5),  
             (max-resolution: 299dpi) {  
  header { background-color: purple; }  

Open in new window

I have always used bootstrap and foundation it they just worked...
itkadminAuthor Commented:
turned out the problem wasnt the CSS.
it was in the doc head, I had to specify to look for the window width. Like this

<meta content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes" name="viewport">

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.