CSS & JavaScript Toolbox
[resolved] Mobile device (2 posts)

  1. Simon
    Posted 3 years ago #

    How can I add specific style for a mobile device?


  2. wipeoutmedia
    Plugin Author

    Posted 3 years ago #

    Hi Simon,

    Thanks for your question. There are a number of techniques that you can implement, which can provide support for mobile devices.

    1) Use @media queries (CSS3) to detect things like:
    - width and height (of the browser window)
    - device width and height
    - orientation – for example is the phone in landscape or portrait mode?
    - resolution

    An example for detecting the iPhone can be represented with the following code:

    @media only screen and (max-device-width: 480px) {
           /*    CSS overrides go here   */

    You can also reference an external stylesheet:
    <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

    ProtoFluid code (shown below) is handy to use if you are concerned the user has a normal desktop browser but using a very tiny window.

    @media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
           /*    CSS overrides go here   */

    To make sure that your website loads zoomed in on your phone-friendly layout rather than zooming out, you would also need to put this code near the top of your header.php file:
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

    2) Use JavaScript code to detect if it is a mobile device and then redirect the user to the ‘mobile’ version of the website.

    A script you could use written by the talented Michael Nilsson is shown below.

    <script type="text/javascript">
    var mobile = function(){
        return {
                var uagent = navigator.userAgent.toLowerCase();
                var list = this.mobiles;
                var ismobile = false;
                for(var d=0;d<list.length;d+=1){
                        ismobile = true;
                return ismobile;
                "windows ce","benq","mda","mot-","opera mini",
                "philips","pocket pc","sagem","samsung","sda",
        alert('You are using a mobile phone to view this page..');
        alert('You are using a desktop browser to view this page..');

    3) There are a number of mobile themes, mobile optimisers, and mobile detection plugins – both premium and free, which you may also consider trying.

    I have been working on a website called Glow Guides – http://glowguides.com.au and wanted to quickly optimise the website for the iPhone. Anyway, this is the script I used and placed at the bottom of footer.php before the closing body tag, which seemed to work well doing it this way.
    <meta name="viewport" content="width=device-width, initial-scale=0.3, maximum-scale=0.5, user-scalable=yes" />

    I chose an initial value that I felt looked good on the iPhone, and selected a maximum scale value so when users pinch-zoom it doesn’t zoom in too far. Also, you must declare user-scalable=yes for the pinch zoom to work.


Topic Closed

This topic has been closed to new replies.

About this Plugin

  • CSS & JavaScript Toolbox
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic