Website does not scale down for mobile screens

I am making a web for desktop, tablet and mobile screens. For this I am using css media queries. When I test my website on desktop browser and when I scale my web bowser down then it does change its layout when it reaches to max-width 740px as mentioned in css. But the problem is when I test this on my mobile then it does not change its layout to fit mobile screens.

I am using 12 columns layout system and using less css. Please help me why it does not change its layout on mobile phones to fit mobile screens.

Here is my css or less css to be precise

html, body {
height: 100%;
//overflow: hidden;
}

body {
min-width: 360px;
background-color: #ffffff;

#page {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.right {
    position: relative;
    right: 0;
}

// Extend column system (from defaults/layout.css)
.row {
    clear: both;

    > .container {
        max-width: 1024px;
        margin: 0 auto;
        padding: 0 2% 0 2%;

        .container {
            max-width: 100%;
            padding-left: 0;
            padding-right: 0;

            &.one {
                width: 8%;
            }
            &.two {
                width: 16%;
            }
            &.three {
                width: 25%;
            }
            &.four {
                width: 33%;
            }
            &.five {
                width: 41%;
            }
            &.six {
                width: 50%;
            }
            &.seven {
                width: 58%;
            }
            &.eight {
                width: 66%;
            }
            &.nine {
                width: 75%;
            }
            &.ten {
                width: 83%;
            }
            &.eleven {
                width: 91%;
            }
            &.twelve {
                width: 100%;
            }

        }
    }
}

}



/*Collapse columns*/
@media only screen and (max-width: 740px) {

.column, .column.one, .column.two, .column.three, .column.four, .column.five, .column.six, .column.eight, .column.nine, .column.ten, .column.eleven, .column.twelve,
.column.close-right, .column.one.close-right, .column.two.close-right, .column.three.close-right, .column.four.close-right, .column.five.close-right, .column.six.close-right, .column.eight.close-right, .column.nine.close-right, .column.ten.close-right, .column.eleven.close-right, .column.twelve.close-right {
    //width: auto;
    //float: none;
    //clear: both;
    margin-right: 0;
}

.column.third {
    display: none;
}

.column.second {
    width: 77%;
}

.column.first {
    //min-width: 180px;
}

}

Answers


http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/


Try adding this to the top of your HTML page:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

That should let the mobile browser know that the page you be rendered at the size of your device/browser, instead of faking the screen size of a desktop computer (and thus confusing your media queries).


Need Your Help

Exchange Web Services GetAttachment will not stream to disk

java soap jax-ws exchange-server exchangewebservices

We are using Exchange Web Services from java (jaxws). Here's the issue. To get an attachment, you execute the GetAttachment soap call (logical enough :) ). Here's the problem: the entire attachment...

Best way to complete this Perl regex one-liner

regex perl awk

I'm trying to use a Perl one-liner to munge some output from grepping svn diff, so I can automatically test the files. We have a run_test.sh script that can take multiple PHP files prepended with ...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.