Title: [Plugin: CSS & JavaScript Toolbox] Mobile device
Last modified: August 20, 2016

---

# [Plugin: CSS & JavaScript Toolbox] Mobile device

 *  Resolved [Simon](https://wordpress.org/support/users/simonwe/)
 * (@simonwe)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/plugin-css-javascript-toolbox-mobile-device/)
 * How can I add specific style for a mobile device?
 * [http://wordpress.org/extend/plugins/css-javascript-toolbox/](http://wordpress.org/extend/plugins/css-javascript-toolbox/)

Viewing 1 replies (of 1 total)

 *  Plugin Author [wipeoutmedia](https://wordpress.org/support/users/wipeoutmedia/)
 * (@wipeoutmedia)
 * [13 years, 11 months ago](https://wordpress.org/support/topic/plugin-css-javascript-toolbox-mobile-device/#post-2731936)
 * 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](https://wordpress.org/support/users/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](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

Viewing 1 replies (of 1 total)

The topic ‘[Plugin: CSS & JavaScript Toolbox] Mobile device’ is closed to new replies.

 * ![](https://ps.w.org/css-javascript-toolbox/assets/icon-256x256.gif?rev=3132209)
 * [CSS & JavaScript Toolbox](https://wordpress.org/plugins/css-javascript-toolbox/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/css-javascript-toolbox/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/css-javascript-toolbox/)
 * [Active Topics](https://wordpress.org/support/plugin/css-javascript-toolbox/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/css-javascript-toolbox/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/css-javascript-toolbox/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [wipeoutmedia](https://wordpress.org/support/users/wipeoutmedia/)
 * Last activity: [13 years, 11 months ago](https://wordpress.org/support/topic/plugin-css-javascript-toolbox-mobile-device/#post-2731936)
 * Status: resolved