CODEWITHSUNDEEP
responsive-designmedia
Lee Herrod
Lee Herrod

Reputation: 51

media queries meta tag not working

I`am developing a responsive website, when i view the site on mobile emulators and re-size the browser all responds perfect but when i look on actual mobile device the site does not resize

Here is my HTML head

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"></head>

here is my CSS

 @media handheld, screen and (max-width: 768px), screen and (max-device-width: 768px) and (orientation: portrait) {{css styles}}

Any one help ??

Upvotes: 1

Views: 709

Answers (2)

Touhid Rahman
Touhid Rahman

Reputation: 2583

Use the following code in head section:

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

Upvotes: 1

justinavery
justinavery

Reputation: 2596

Remove the media query for handheld, these days mobiles fall under the screen area.

Check out http://mediaqueriestest.com to find out exactly what your current device is responsive to.

Upvotes: 1

Related Questions