How to define the viewport for different devices in WordPress

First download Mobile_Detect from here:

Extract the zip-file and upload only the file Mobile_Detect.php to
your theme folder where the function.php is located.

The following code detects if the site is viewed by a desktop, a mobile or a tablet.
Add this code to the end of your functions.php

function detect_mobile()
    if(  !class_exists(„Mobile_Detect“) ) {
        require_once „Mobile_Detect.php“;
    $detect = new Mobile_Detect;

    $dev = „desktop“;
    if( $detect->isMobile() ){
        $dev = „phone“;
    if( $detect->isTablet() ){
        $dev = „tablet“;
    return $dev;

Add the following code to your header.php and change the viewport parameters for your needs.

<?php if (detect_mobile() == „phone“):?>
    <meta name=“viewport“ content=“width=1200, initial-scale=0.25″ />
<?php endif ?>
<?php if (detect_mobile() == „tablet“):?>
    <meta name=“viewport“ content=“width=1200, initial-scale=0.5″ />
<?php endif ?>

This is a save way to find out if you are on a tablet or a mobile, because the @viewport  css paragraph does not work everywhere.