WordPress.org

Ready to get started?Download WordPress

Forums

Don't show a widget if browser is a mobile browser? (7 posts)

  1. Jim R
    Member
    Posted 1 year ago #

    I have some content I'd like block if the User is on a mobile browser, primarily a phone browser. I've done some searching and can't find much on it.

  2. wpismypuppet
    Member
    Posted 1 year ago #

    I would think the only way this is accomplished is to have a different theme being displayed for mobile devices, even if the mobile theme is identical in every aspect to the full site theme with the exception of your plugin. There are plugins (of course) that accomplish this for you, and you can customize the mobile theme... take a look here and see if that helps:

    http://www.wpbeginner.com/wp-tutorials/11-ways-to-create-a-mobile-friendly-wordpress-site/

    We've used WPTouch before, but it's not SEO friendly. Easy to work with though...

  3. Jim R
    Member
    Posted 1 year ago #

    I'm already using a mobile friendly theme, beyond a widget area that I'd like in a regular browser but not in a phone browser. There has to be something in the codex.

  4. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    WPtouch does a nice job of serving sites to mobile users - there is also a Prov version available that with full options

  5. B-Meister
    Member
    Posted 8 months ago #

    For anyone who might be viewing this at a later time (as I reckon the original poster has figured it out by now) this is what I think works best:

    Write this in your CSS file (or create a separate CSS file targeted specifically at mobile devices)

    1. @media screen and (max-device-width: 480px) {
    2. @media screen and (max-device-width: 480px) and (orientation: portrait) {
    3. @media screen and (max-device-width: 480px) and (orientation: landscape) {

    Number 1 is targeted only at devices with a maximum width of 480 pixels, with the media type "screen"
    Number 2 is equal to number 1, with the difference that it specifies the device should be in portrait mode (held vertically)
    Number 3 is also equal to number one, though in this case the device should be in landscape mode (held horizontally)

    Of course you can also adjust the pixels as you see fit.

    Below one of these media queries you can put your style rules, like
    "display: none;" for something you don't want to show on the mobile site.
    I'll give you an example, lets say you don't want to show an element with the ID "Picture1" you should use something similar to this syntax:

    @media screen and (max-device-width: 480px){
    #Picture1 {
           display: none;
    }

    You can put this in your Style.css file for instance, and it should work.

  6. wpismypuppet
    Member
    Posted 8 months ago #

    First off, let me start by staying that this advice is not "responsible web programming". Simply "hiding" elements from mobile devices still causes the mobile devices to download the content, even if you don't "see" it on the screen. For people with unlimited data plans it may not be that big of a deal. But almost every country charge mobile users by the megabit, and downloading content that they'll never see eats up their data plans (and their wallets) for no reason.

    We who code the web should start taking this type of practice more serious. I HIGHLY recommend reading up on articles from people like Luke Wroblewski, Myers, and all the other popular web gurus out there on "Mobile First" and "Responsible Web". Do a Google search and you'll see lots of information out there.

    And secondly, it all depends on how sensitive the data is we are trying to hide from mobile devices. If it's really sensitive data, display:none will not protect you. Screen readers and other accessibility programs will quickly pick up on hidden elements. My guess is the data isn't that sensitive if it's being displayed on non-mobile devices, but still we must consider this as well and never assume. We all know what that leads to...

    And third, unknowing of why the OP wants to hide data from mobile devices, I must also stress that it is bad practice to have your mobile version contain less data or elements than it's "full version" counter part. Why hide data??? More and more people are using their mobile devices strictly for web browsing and not using laptops or desktops. Websites that we create are content driven... it shouldn't matter what device the website is being viewed on, you should serve the same content. The only difference is how we arrange that content, but we don't even have much control over that anymore. In fact, we've never had control over that... it's always been just an illusion. But that's another thread altogether.

  7. mindctrl
    Member
    Posted 8 months ago #

    You can also use the Mobble plugin to detect mobile devices and use the is_mobile function included in the plugin to control output.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.