Webpage Section Visible Only For Mobiles

Question

I've built a webpage for a certain web application I've made. I'd like to add a specific option only for smartphone users , and don't want it to be visible for non-smartphone users. Is there any method to define a section ( div ) to be visible only for smartphone users?

Thanks in advance.

Using javascript, detect if the browser is a mobile browser. If so, show the div, else set the property to hidden... — DmitryK, Apr 03 '13 at 15:09
What exactly are you looking to target? Devices have a lot of things in common. Something usually detected is whether it is a touch screen (has `touch` events). Unfortunately, smartphones, tablets, and even some computers have that capability. You could also target screen size, but that isn't fully reliable. Finally, checking the `userAgent` is possible, but can be spoofed. — Ian, Apr 03 '13 at 15:09

score 0 · Answer 1 · answered Apr 03 '13 at 16:18

You could use a Responsive Design approach and achieve what you want with only css, using media queries:

//THIS CSS CLASS IS APPLIED ALWAYS
div.my-option {
    display: none;
}

//THIS MEDIA QUERY APPLIES ITS STYLES ONLY WHEN THE SCREEN WIDTH IS <= 767, SO IT'S A SMARTPHONE DISPLAY.
//IT OVERRIDES THE ONE ABOVE
@media only screen and ( max-width: 767px ) {
    div.my-option {
        display: inline;
    }
}

If you're interested in Responsive Design, two of the most extended options are Bootstrap and Zurb Foundation

Webpage Section Visible Only For Mobiles

1 Answers1