changing an element when screen dimensions change

StackOverflow https://stackoverflow.com/questions/23180851

Question

I am using semanticcss framework. I have two navigation menus one for desktop and the other for mobile. I am using this css:

#mob {
    display: none;
}
@media (max-width: 960px) {
    #desktop {
        display: none;
    }
    #mob {
        display: inline-block;
    }

It works on google chrome when i resize the windows but it doesnt work on the two android devices i have tested. I also tested it using ios7 with browserstack but with no luck.

my live site is here: http://kaylins-sites.azurewebsites.net/default.aspx

and the rest of the code is here: http://jsfiddle.net/Cu3aR/

Any advice would be great.

Thanks.

Était-ce utile?

La solution

include this in <head></head>

  <meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->

change you @media style as this

@media only screen (max-width: 960px) {
    #desktop {
        display: none;
    }
    #mob {
        display: inline-block;
    }
}

Now I try to explain maybe..:)

@media (max-width:960px)

for a window with a max-width of 960px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases. 

@media screen and (max-width:960px)

for a device with a screen and a window with max-width of 960px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.

@media only screen and (max-width:960px)

Here is a quote straight from W3C to explain this one.

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

As there is no such media type as "only", the style sheet should be ignored by older browsers.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top