는 어떻게 460px 화면뿐만 아니라이 320 템플릿을 갖는 동안 640 픽셀 디자인, 축소 표시 할 수 있습니까?

Question

등 뷰포트, @media, 픽셀 비율과 것은 나에게 어려움을주고있다. 나는 한 320 ~ 한 640 템플릿 스마트 폰 (반응) 웹 사이트를하고 난 다음 달성하고자 :

까지 폭이 320에 : 320 ~ 템플릿을 보여줍니다.

321 픽셀 폭 639에에서 : 쇼 640 템플릿 화면에 맞게 축소.

640 픽셀 이상 : 쇼 640 템플릿 (더 줌 없음)

합니다 (640 템플릿이 진정으로 640 픽셀 너비 이미지와 물건을 가지고, 그래서 난 줌이 뷰포트 또는 메타 태그에 의해 수행되어야한다 생각)

모바일 최초의 디자인 등에

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

그리고 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; 
     } 
    } 

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