CODEWITHSUNDEEP
responsive-designviewportpixel-ratio
DesignConsult
DesignConsult

Reputation: 191

How can i make a 460px screen show a 640px design zoomed out, while having a 320px template as well?

Viewports, @media, pixel ratios and so on are giving me a hard time. I have a smartphone (responsive) website with one 320px and one 640px template and i want to achieve the following:

Up to 320px width: show 320px template.

From 321 to 639 px width: show 640px template zoomed out to fit screen.

640px or more: show 640px template (no zoom)

(the 640px template has images and stuff that are truly 640px width, so i guess the zooming should be done by the viewport or a meta tag)

Upvotes: 2

Views: 972

Answers (1)

Akshaya Raghuvanshi
Akshaya Raghuvanshi

Reputation: 2277

Use mediaqueries for mobile first design like;

@media only screen  and (max-device-width : 320px) {

/* Styles 320px */
.imageContainer{display:none} /*example for image containing element*/
}

For medium screens;

@media only screen and (min-device-width : 321px)
    and (max-device-width : 639px) {

    /* Styles upto 640px */
    .imageContainer{display:none}
    }

And For screens higher than 640px;

@media only screen  and (min-device-width : 640px) {

    /* Styles above 640px */
    .imageContainer{
       display:block;
     }
    .imageContainer img{
      width:100%; /*gives full width to all images on this viewport*/
      height:auto;
       }
    }

For Retina displays like iPhone4 and iPad etc;

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

And yes, Zooming the viewports are maintained by Meta tag included in your head which is:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />

Upvotes: 0

Related Questions