CODEWITHSUNDEEP
htmlcssresponsive-design
Junaid Ali
Junaid Ali

Reputation: 71

Responsive css to display mobile version of the webpage

I'm working on a web page to show responsive version of the page on a mobile phone

when I resize the browser window in PC it displays just fine but when I open up the page from mobile phone, it just displays the whole page instead of the more simple mobile version as it does on the pc upon resizing

I'm not using any media or meta tag. I'm just using values in percentages..

Any suggestions if I should be using media or meta or viewport or something similar to control the mobile view as well?

Upvotes: 2

Views: 4434

Answers (4)

Spedwards
Spedwards

Reputation: 4492

You should use media queries. This will work regardless.

A quick example is:

.banner {
    width:1024px;
}

@media screen and (max-width:420px) {
    .banner {
        width:420px;
    }
}

Upvotes: 2

Whats Going On
Whats Going On

Reputation: 1397

A per the Response Layout i Don't which technology and scripting you have used (java,.net,php)

for the Part of Meta check this

and also check this

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes">

But If you Use Adobe Dream Weaver It will adjust the Response according to the Device.

and if you are using android Mobile Please check weather your Browser is in which mode (moile or Desktop). If its in Desktop change it to Mobile

Upvotes: 0

CvR
CvR

Reputation: 48

Add the viewport meta tag and use media queries.
Giving %'s to an element makes the element scalable, this doesn't mean a browser on a mobile phone knows it has to downscale. This is handled with media queries.

CSS-tricks is a nice website to learn and read more about media queries: http://css-tricks.com/css-media-queries/
I recommend reading about it first, then try it, if you can't get it to work... well post it on Stack ^.^

Is this a sufficient answer for you?

Goodluck!

Upvotes: 1

Azylak
Azylak

Reputation: 157

I think you need to insert this metatag, otherwise it will show you the entire page.

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

Here you can read about this meta tag

Hope this helps

Upvotes: 2

Related Questions