Как сделать так, чтобы на экране размером 460 пикселей отображался дизайн размером 640 пикселей, а также шаблон на 320 пикселей?

Question

Viewports, @media, пиксельные отношения и так далее доставляют мне неприятности. У меня есть веб-сайт для смартфона (адаптивный) с одним шаблоном 320 пикселей и одним шаблоном 640 пикселей, и я хочу добиться следующего:

Ширина до 320 пикселей: показать шаблон 320 пикселей.

Ширина от 321 до 639 пикселей: показать шаблон размером 640 пикселей, уменьшенный до размера экрана.

640px или больше: показать шаблон 640px (без увеличения)

(в шаблоне 640px есть изображения и прочее, которые действительно имеют ширину 640px, поэтому я предполагаю, что масштабирование должно выполняться с помощью области просмотра или мета-тега)

Answer 1

Используйте mediaqueries для мобильного первого дизайна, как;

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

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

Для средних экранов;

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

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

И для экранов выше 640 пикселей;

@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;
       }
    }

Для Retina-дисплеев, таких как iPhone4, iPad и т. Д.;

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

И да, масштабирование областей просмотра поддерживается метатегом, включенным в вашу голову:

<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" />