Avatar of itkadmin
itkadminFlag for Canada asked on

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

Hello

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 http://www.crow.ws/test/index.html.

Any help is greatly appreciated

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test HTML5 and Media Queries</title>
<style>
/*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;
	text-align:center;
}

h2 {
	margin: 1.25em 0 0 0;
}

header p, .header {
	font-style:italic;
	text-align:center;
}

p {
	margin-top: 0px;
}

aside {
	font-style:italic;
}
</style>
</head>

<body>
<header>
<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>
</header>
<hr>
<article>
<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>
</article>
<hr>
<footer>
	<address>
    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
    </address>

</body>
</html>

Open in new window

index.html
CSSHTMLWeb Development

Avatar of undefined
Last Comment
itkadmin

8/22/2022 - Mon
Scott Fell

See how this works on screen and mobile http://jsbin.com/uXAZoRI/1/

I added the below code from suggestion http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript
/* 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...
ASKER CERTIFIED SOLUTION
itkadmin

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck