CODEWITHSUNDEEP
cssmedia-queries
José António
José António

Reputation: 101

My smartphone is not recognizing the @media queries

I rarely do responsive websites, and media queries for me is completely new. Thats why I'm having some trouble.

I'm making a maintenance page, and I'm using media queries to make the page responsive.

I tested on two smartphones with big screens, the first one worked perfectly, the second one, is showing the full page.

Thats my page: http://www.geocities.ws/tctheme/

I know that I'm doing something wrong. I used the media queries this way:

@media only screen and (min-width: 978px) {
//big screens, desktop...
}

@media only screen and (max-width: 977px) {
//tablets...
}

@media only screen and (max-width: 445px) {
//smartphones
}

Thank you.

Upvotes: 0

Views: 118

Answers (1)

Rodrigo Calix
Rodrigo Calix

Reputation: 627

First At All, remember use this meta tags:
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="user-scalable=no" />

the first one, will help you by rendering the page at the real device width, cause usually without this tag the device will display the page with it's resolution like 1024x720 instead of it real width that could be 720x480.

the second is to disable the zoom in and zoom out of your device.

hope been helpful!

Upvotes: 2

Related Questions