Reputation: 3

Hide content for mobile

I've been trying to hide something that looks weird in the mobile version of my site. I can't remove it since it use resources from the desktop version of the site so if I remove it would disappear from the desktop version.

I tried to hide it using CSS by using this code,

@media only screen and (max-device-width: 480px) {
    .HideMobile{
        display:none;
    }  
}

So, my question is. Is there any better way to do this? I'm trying to hide a PHP code from mobile platforms.

Upvotes: 0

Answers (5)

Mike

Reputation: 144

I would recommend adopting a RESS approach. It is essentially a combination of responsive web design with a server component. The general logic here is as follows: requesting device is identified on server and based on some conditions that you set a certain set of resources is supplied. For a server detection software I recommend using solution from 51Degrees.

So, suppose you have a div block on your website that you want to hide on all mobile devices. First you need to download the PHP detector from sourceforge. Your page would then have the following code:

page.php

<?php
require_once 'path/to/core/51Degrees.php';
require_once 'path/to/core/51Degrees_usage.php';
//Where path/to/core is path to 'core' directory of detector
?>
<html>
<head>
<?php
$css_file = "desktop.css";

if ($_51d['IsMobile'] == TRUE)
{
$css_file = "mobile.css";
}
?>
<link rel="stylesheet" type="text/css" href="<?=$css_file; ?>">
</head>
<body>
<div class="desktop_only">
<p>Lorem......</p>
</div>
</body>

mobile.css

.desktop_only
{
 display:none;
}

Now mobile devices won't see that div. The real benefit of this approach is in the ability to supply a different set of resources, based on device type and you don't have to place dozens of media-queries for every possible screen size. You might want to tweak the mobile design of your website to avoid wasting precious screen space of smartphones and tablets, or re-design the menu to avoid drop-down sections etc...

Another great thing about this approach is: if you ever need to conduct additional checks (i.e: supply different theme for Apple devices, or check if device supports HTML canvas etc...) they will be easy to integrate in to your current implementation.

Hope this helped.

Upvotes: 0

Marvin

Reputation: 157

When you want to hide HTML Output, make a class in your css

.hide_mobile {
    display:block;
}

and say in your css, that on a special width this class should be set to display:none;

@media screen and (max-width: 480px) {
.hide_mobile {
    display:none;
}
}

Upvotes: 0

ProllyGeek

Reputation: 15836

I usually use this , works great disregarding display size , assuming your mobile version includes tablets ,ipads..etc.

usage:

as simple as including this snippet:

(function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile');

just call it on document ready.

Upvotes: 0