Starting out with CSS media queries

Question

Please see my website here www.andrewtanner.me/dev

Basically, I'm just starting out with media queries. There are no specific devices I'm wanting to target other than mobile ones (tablets, smartphones). The website renders fine on mobile as it is so it's really just a case of optimising for mobile (eventually I want to look at big chunky touch buttons and generally a more friendly touch experience). The website is only for my own personal benefit and is really just a playground for myself.

My code is very basic so far and the pixel value is arbitrary.

@media (max-width: 480px) {
#container {display: none}

The 'container' ID contains a mixture of CSS and JavaScript/jQuery for rendering an interactive background.

When I resize the browser window on desktop (using Chrome) it works as expected, the background disappears. However, when viewed on a mobile device (Galaxy S4 using both Chrome and the stock browser) the background remains visible. I'm pretty certain this is because of the PPI of modern smartphones being just as good, if not better than laptop/desktop screens. Of course, a pixel is a relative value but I am are of the pixel-ratio element that can be used for media queries but I have tried this but to no avail (as well as including the browser engine).

I'm wanting to know how to fix this and also learn a bit more about how best to render specific CSS on mobile devices. I'm clearly missing something and while I could perhaps just take code from elsewhere and modify it - this doesn't really satisfy my curiosity).

Thanks

Andrew

Answer 1

You may need to add meta tags to define the width for the viewport. Try adding the following to the head of your document and let me know if the media query is respected on your mobile device:

<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0">

Answer 2

Try adding this to the head section:

<!-- Mobile Specific Metas -->
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">