2

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)

DesignConsult
  • 191
  • 1
  • 4

1 Answers1

0

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" />
Akshaya Raghuvanshi
  • 2,237
  • 22
  • 21
  • Tnx for your answer but it's not the answer i was looking for: i don't want a third design for 321-639 pixels. I want to keep it at 2 (320 and 640) where for instance a 480 device gets to see the 640 design ZOOMED OUT. It is this last part i have trouble with. I don't have trouble with defining different width-ranges for responsive designing. – DesignConsult Apr 15 '13 at 06:37
  • I was not suggesting you to add the third design. I gave an example, it completely depends on you. have you tried other things i mentioned for that like- viewport meta tag and other thing is the mediaqueries for retina displays. It works – Akshaya Raghuvanshi Apr 15 '13 at 07:19
  • 1
    I tried changing viewport aswell but with no luck. Is there a viewport setting that says "whatever the screen width, show it at full width"? So if the screen width is 480px and the design is 1024px, it gets zoomed out a lot so 1024px is compressed into 480px. If the screen is 480px and the design is 640px, it gets zoomed out in the same way but less. If the screen is 480px and the design 320px, it gets zoomed in. Can you help me with this? – DesignConsult Apr 15 '13 at 12:01
  • The first one is possible, very simple in each mediaquery define width:100%; it'll automatically resized according to the viewport size. But zoom in out can't be possible with it. Only one solution you can do is define the 7-8 or more mediaqueries at small difference viewports, and declare every width of that box/element on those sizes. So that you can get flexible height/width of that element like zoomed in or out. – Akshaya Raghuvanshi Apr 15 '13 at 18:11
  • I was afraid of this and it is not the solution that i am looking for, but tnx for your time and effort! – DesignConsult Apr 16 '13 at 06:50