Mobile: display:none acting strange

Question

I’ve been using display: none; on a site I’m designing now. So when I load the page on the mobile to see the progress, everything works fine. What I do is when css detects the device width of a mobile, it activate the display: none; of an element. But there’s something I don’t understand.

The first time the page loads (google chrome) on the smartphone (portrait mode), the element is hidden. When I rotate the screen(landscape mode), it’s still hidden. But when I rotate it again (portrait mode), there is when the element appears that is supposed to be hidden. Anyone can explain this?

Device: HTC One – Google Chrome browser

Answer 1

Solution: add this code to the header

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

And don't use @media (min-device-width) or (min-device-height), instead just make use of (min-width) or (min-height) and start from there. It will take a lot of headache when developing for mobile or tablets.