데스크톱 브라우저에서 뷰포트 크기 조정

Question

나는 1400 픽셀 너비에서 960 픽셀 너비까지의 화면을 제공하는 반응 형 사이트를 원했던 고객이 있습니다. 수평 스크롤 바가 나타나기까지는 그 이상이 아닙니다. 사이트는 화면의 왼쪽 및 오른쪽 가장자리와 수평을 유지해야합니다.

처음에는 미디어 쿼리, 일부 자바 스크립트 및 기타 현대적인 "반응 형"기술을 사용하여이를 쉽게 수행 할 수 있다고 생각했습니다. 나는 그 길을 건너 갔고, 반응이 빠른 현장에서의 첫 경험 이었지만 그렇게 어렵지 않았습니다. 이미지, 헤더 크기, 텍스트 크기 등의 동적 크기 조정을 많이해야했습니다. 많은 작업과 테스트가 필요했지만 가치가있었습니다. 그렇지 않습니까 ?? !!

이제 모바일 사파리가 뷰포트 크기 조정을 통해이 기술을 효과적으로 구현할 수 있음을 깨닫게되었습니다. 이것이 ipad에서 960px 및 1200px 와이드 사이트가 브라우저 창의 가장자리에 맞춰지는 이유입니다.

제 질문은 '모바일 사파리가 iOS에서 수행하는 것과 같은 방식으로 데스크톱 브라우저에서 크기 조정 뷰포트를 시뮬레이션 할 수 있습니까?'입니다.

Answer 1

백분율 또는 em을 사용하여.

body{ 
    width: 100%; 
} 
content{ 
    width: 60%; 
    float: left; 
} 
sidebar{ 
    width: 35%; 
    float: right; 
} 

다음은 EMS

사용하여 텍스트 크기를 조정하는 미디어 쿼리를 사용할 수 있습니다