WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. Simon
    Member
    Posted 2 years ago #

    How can I add specific style for a mobile device?

    http://wordpress.org/extend/plugins/css-javascript-toolbox/

  2. wipeoutmedia
    Member
    Plugin Author

    Posted 2 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 {
            detect:function(){
                var uagent = navigator.userAgent.toLowerCase();
                var list = this.mobiles;
                var ismobile = false;
                for(var d=0;d<list.length;d+=1){
                    if(uagent.indexOf(list[d])!=-1){
                        ismobile = true;
                    }
                }
                return ismobile;
            },
            mobiles:[
                "midp","240x320","blackberry","netfront","nokia","panasonic",
                "portalmmm","sharp","sie-","sonyericsson","symbian",
                "windows ce","benq","mda","mot-","opera mini",
                "philips","pocket pc","sagem","samsung","sda",
                "sgh-","vodafone","xda","palm","iphone",
                "ipod","ipad","android"
            ]
        };
    }();
    
    if(mobile.detect()){
        alert('You are using a mobile phone to view this page..');
    }else{
        alert('You are using a desktop browser to view this page..');
    }
    
    </script>

    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.

    Regards,
    Damo

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic