[Solved] Mobile: display:none acting strange

[Bryan]

Hi guys,

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

[David Hosanna]

So? You use media queries to detech device width?

You can use jQuery .remove() instead or pure javascript like

el.parentNode.removeChild(el);

Reference:
http://youmightnotneedjquery.com

[Paulie_D]

You might need to include the landscape / portrait orientation options in your media queries.

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

[paulob]

These problems may be related to the use of device-width rather than min-width or max-width media queries from others I’ve seen with similar problems. PPK seems to recommend avoiding device-width because what you are really interested in is the width of the layout viewport and not the device.

Try it and see if it makes a difference (this also assumes you have the correct meta viewport tag in place).

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

[Bryan]

Hey guys, thanks for the replies. I just realised about debugging on Android Google Chrome, thanks for that @TheDoc and thanks to that I found that the problem sits on the width, height, device-width and device-height, it kinda not following the rules. I added the portrait and landscape code as @Paulie_D stated. And also @paulob, I have inserted the meta name code, but I haven’t test it yet.

Here is my CSS code: http://codepen.io/bjans3n/pen/oKdus?editors=010

Remarks:

• When refreshing the page from Portrait mode: .mobile is purple .desktop is hidden (works fine). I turn it to Landscape mode: .mobile is yellow .desktop is hidden (works fine). When I turn it back to Portrait mode: .mobile is orange .desktop is blue (both visible). Why???
• When refreshing the page from Landscape mode: .mobile is orange .desktop is blue (both visible). I turn it to Portrait mode: .mobile is orange .desktop is blue (both visible). Why???

Is there something I’m doing wrong with the width and height?

I took the width and height from this site http://www.mydevice.io/devices/. The most devices are between:

• Width: 320px and 400px
• Height: 480px and 640px

PS: I’m running the site locally, sorry for that. Last hope I will use jQuery as @David said, but I’m just curious to resolve this and better understand the use of width, device width, device-height and height

[paulob]

Hi,

That seems far too complex to me and I would do something simpler like this.

Forget about device width and orientation unless you really want to target specific devices but then you run into the insurmountable problem of which devices to support as there are loads of them now all at different widths and resolutions.

What you are really interested in is how a layout looks at a certain width regardless of device. If someone has their desktop browsers squashed small then its good to give them a display that fits that small space and not just reserve it for mobile.

Media query breakpoints should be based on the design itself and not tied to a device as such. You create a breakpoint at the point in your design where something doesn’t look right and this will be different for every site. If you can create a fluid/elastic site and adjust with suitable breakpoints you automatically create a site that fits on all devices.

Remember though that without the viewport meta tag then mobiles will take no notice of your media query widths and scale the page as though it was 980px wide. You also need the initial scale rule added (as per my example) or you run into the zoom rotation bug (which I believe you are already experiencing).

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

[Bryan]

Wow, nice. Now it works smoothly @paulob. Thanks for the advice, I learned something new today and also understanding how the width and height works for device and desktops. It is far better to design the layout by width regardless the device you’re using. As you said, each time there is new device on the market with different dimensions.

So for @TheDoc @Paulie_D @David, check out the solution @paulob proposes. It will take a lot headache out of you.

PS: I’m not forgetting that IE7 and below doesn’t support the @media query, but we have to get along as Microsoft did with Windows XP. Just tell the users to upgrade and have better experience, they won’t regret.

[Author]

Posts