html - why won't media query work on mobile and tablet -
my media query works per expected on desktop not in mobile phone or tablet.please check out live code here http://jsfiddle.net/e8cgt/
if screen bigger 1024px should green tablet screen background stays yellow.
this happens on cell phone no matter stays yellow.
or read below
my html:
<html> <head> <title>home page</title> <link rel="stylesheet" media="all" type="text/css" href="style.css"/> </head> <body> <div id="master"> <header> </header> <nav> welcome home page sites directory <ul> <li><a href="#">meet sensei</a></li> <li><a href="#">tour our dojo</a></li> <li><a href="#">our martial art program</a></li> <li><a href="#">our training schedule</a></li> <li><a href="#">current events</a></li> <li><a href="#">faq</a></li> <li><a href="#">contact</a></li> </ul> </nav> </div><!-- end of master div tag --> </body> </html> my css:
/* not work have below media on ride */ body{ background-color: red;} /* low resolution cell phones 480 , below */ @media screen , (max-width:480px) {body{background-color: blue;}} /* high resolution screen between 1024 , above */ @media screen , (min-width:1024px) {body{background-color: green;}} /* medium resolution screen between 481 , above */ @media screen , (min-width:481px) {body{background-color: yellow;}} [solution]
1) view port did not know about.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 2) changed priority of screen after casing style sheets.
body { background-color: red; } @media screen , (max-width:480px) {body{background-color: blue;}} /* medium resolution screen between 481 , above */ @media screen , (min-width:481px) {body{background-color: yellow;}} /* high resolution screen between 1024 , above */ @media screen , (min-width:1024px) {body{background-color: green;}} thank all.
see if helps you:
live view
edit view
i've made few changes code;
firstly want add
<meta name="viewport" content="width=device-width, initial-scale=1.0"> to head of page. stop smartphones , other devices scaling page.
in media queries use @media screen only , .... there's nothing wrong using in selector, though have specific use, hide style older browsers. if isn't intentional can omit it.
( keyword ‘only’ can used hide style sheets older user agents.: source
i think you'll have easier time targeting different size viewports if use
@media screen , (min-width:xpx) , (max-width:ypx){ .... } as @tdelang correctly pointed out.
good luck!
Comments
Post a Comment