Search code examples
mobilestylesheetmedia-queries

If the screen width is less than 700px it should add another css stylesheet using mediaqueries... but it doesn´t

I´m using a different stylesheet for smartphones and smaller screensizes using <link rel="stylesheet" type="text/css" media="only screen and (max-width: 700px)" href="/smartphones.css" />

The thing is that in my browser it works ok (when I make the window smaller, or when I use a site that emulates some smaller devices), but it won´t work when I try to access my site using my phone. I´ve tried with an HTC Wildfire (240x320 px) and I´ve set my smartphones.css stylesheet to get called if the screen is smaller than 700px.

I´ve deleted the cache, and I´ve even tried with a couple of other phones... it still appears the complete, normal, big sized window version of my site.

Any thoughts on what could be wrong?

The site is liganet.net

Thanks!!

Solution

  • It might be that your smartphone is not telling your website that it's screensize is small. It happens with smartphones sometimes. My HTC Wildfire scrolls the window and keeps it big, instead of telling the website that it should be handed a smaller version.

    Maybe you should check for HTTP headers for User-Agent instead of relying on screen size for this.