1

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?

Richard Grandi
  • 47
  • 2
  • 7
  • Search for `detect mobile html`. I think you'll find stuff that checks the `user-agent`. – keyser Aug 13 '14 at 15:12
  • I don't think this is possible with just html and css - you'll need to either use js or a server side language – Pete Aug 13 '14 at 15:21
  • Is there a legitimate reason to do so? Why *don't* you want people to call you if they're on a (PC, tablet, notebook, …)? At what point does "mobile" matter? (Neither my Android tablet nor Ouya can make phone calls, but my desktop PC's and notebooks can) – BRPocock Aug 13 '14 at 15:36

2 Answers2

1

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

xam
  • 408
  • 5
  • 11
  • I would not use `maximum-scale=1, user-scalable=no`...it's not recommended an provides a poor user experience. – Paulie_D Aug 13 '14 at 15:21
  • Hey Paulie_D interesting thought, have you got a source for this or could you expand on the user experience issues a bit more. As i disagree. – xam Aug 13 '14 at 15:33
  • 1
    Certainly, if I can't scale the page in a mobile browser..say because I wear glasses (which I do) and can't read the text, I'm stuck because you've taken the option away from me. It would be like disabling `zoom` on a desktop site. We're not all blessed with perfect eyesight. – Paulie_D Aug 13 '14 at 15:36
  • It prevents users from zooming in to make small text legible, which is *extremely* subjective to both the device and the user. – BRPocock Aug 13 '14 at 15:37
  • [**"Stop using the viewport meta tag (until you know how to use it - Article)"**](http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho) – Paulie_D Aug 13 '14 at 15:38
  • Well yes it does, and i also do not have perfect eye site. but that user issue should be solved by the users set font size, if you've made a layout for mobile you should really have a font size thats accessible for all, so as not to force the user to zoom in and out, surly the design at that point is at fault. – xam Aug 13 '14 at 15:41
  • OK so i saw my dad try to pay the congestion charge in london from his phone and i now agree completely with the above comments, zoom is defiantly a necessity for accessibility. – xam Sep 29 '14 at 09:37
0

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

Community
  • 1
  • 1
norin89
  • 482
  • 3
  • 8