CODEWITHSUNDEEP
androidhtmlioscss
Richard Grandi
Richard Grandi

Reputation: 47

Hiding an element based on device

I wish to have a DIV element show up on my website only if the user is on a mobile device. This is for a small business website and I want to have a link that allows the end user to call the business direct from the web page - I don't need this DIV element to appear on the desktop version of the website.

I have achieved this using the following code:

    #callus {display:none}

    @media screen and (max-width: 900px) {
      #callus { display:inline !important; }
    }

    .callnow {
        position: fixed;    
        bottom: 0px;
        left: 0px;
        height: 100px;
        width: 960px;
        background-color: #f90;
    }

However, upon testing, I have realised that modern mobile devices often have high resolutions that are in some cases equal to what might be considered a "normal" desktop resolution, therefore I am looking for a solution that simply looks for something like "If OS is Windows Phone, iOS or Android then show this element".

Is this possible?

Upvotes: 1

Views: 112

Answers (2)

norin89
norin89

Reputation: 482

It's not possible with pure CSS Media Queries however you can add queries to address specific device - look here.

You can detect mobile browser (User Agent) with JavaScript and add some class to body - e.g. mobile-device and then in CSS .mobile-device #callus { display: inline; }. I found great solution here: https://stackoverflow.com/a/11381730/3589528

Upvotes: 0

xam
xam

Reputation: 408

You can detect for different features using modernizr http://modernizr.com/ for example detecting touch is useful, but it requires Javascript support.

Mobile devices despite having high resolution screens should still work with media queries. Make sure to have the below code in your header

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

this sets mobile devices to render the site correctly despite HiDPI

Upvotes: 1

Related Questions