CSS로 전체 웹 페이지를 확장하려면 어떻게해야합니까?

Firefox를 사용하면을 누르기 만하면 전체 웹 페이지를 확대 할 수 있습니다 CTRL +. 이것이하는 일은 전체 웹 페이지 (글꼴, 이미지 등)를 비례 적으로 확대하는 것입니다.

간단한 CSS를 사용하여 동일한 기능을 어떻게 복제 할 수 있습니까?

다음과 같은 page-size: 150%것이 있습니까? (전체 페이지 부분을 x % 증가시킬까요?)

zoomIE 5.5 이상, Opera 및 Safari 4 및 Chrome에서 지원되는 CSS 속성 을 사용할 수 있습니다.

사용할 수 있습니까 : CSS 줌

Firefox는 Zoom ( 여기서는 bugzilla 항목 )을 지원하지 않는 유일한 주요 브라우저 이지만 Firefox 3.5에서 "proprietary"-moz-transform 속성을 사용할 수 있습니다 .

그래서 당신은 사용할 수 있습니다 :

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
} 

이 답변은 다소 늦었지만 사용할 수 있습니다.

body {
   transform: scale(1.1);
   transform-origin: 0 0;
   // add prefixed versions too.
}

페이지를 110 % 확대합니다. zoom스타일이 있지만 Firefox는 여전히 슬프게도 지원하지 않습니다.

또한 확대 / 축소와 약간 다릅니다. 는 css transform이 있지만, 페이지를 확대 할 수 있도록, 이미지 줌처럼되지 리플 로우 원인 등을 작동

편집 에서 변형 원점을 업데이트했습니다.

CSS가 완전히 주위 ex또는 em단위로 구성된 경우 이것이 가능하고 가능할 수 있습니다. 또는 font-size: 150%에 대한 스타일 로 선언하면 됩니다 . 이로 인해 다른 모든 길이가 비례 적으로 확장됩니다. 그러나 스타일도 얻지 않으면 이미지 크기를 조정할 수 없습니다.bodyhtml

그러나 그것은 매우 큰의 경우 어쨌든, 대부분의 사이트에서.

Johannes가 말한 것처럼 (응답에 대해 직접 언급하기에 충분한 담당자는 아니지만) 모든 요소의 크기가 글꼴 크기의 배수로 지정되어있는 한 실제로이 작업을 수행 할 수 있습니다. 의미, %, em 또는 ex를 사용한 모든 것 단위 ". 비록 %는 글꼴 크기가 아닌 요소를 포함한다고 생각합니다.

그리고 픽셀로 구성되어 있다고 가정하면 이미지에 일반적으로 이러한 상대 단위를 사용하지는 않지만 훨씬 더 실용적인 트릭이 있습니다.

정의 body{font-size: 62.5%};하면 1em은 10px와 같습니다. 내가 아는 한 모든 기본 브라우저에서 작동합니다.

그런 다음 width: 10em; height: 10em;Firefox의 크기 조정이 기본값으로 설정되어 있다고 가정하면 100px 정사각형 이미지를 지정할 수 있습니다 . 이미지는 원래 크기입니다.

확인 body{font-size: 125%};및 모든 - 이미지를 포함하여 - 더블 원래 크기 줘야 해.

이 코드를 사용하면 1em 또는 100 %가 신체 높이의 1 %와 같습니다.

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"

 * {
transform: scale(1.1, 1.1)
}

이것은 페이지의 모든 요소를 ​​변형시킵니다

Jon Tan은 자신의 사이트 인 http://jontangerine.com/ 에서이 작업을 수행했습니다. 이미지를 포함한 모든 것이 ems로 선언되었습니다. 모두. 이것이 원하는 효과를 얻는 방법입니다. 텍스트 줌과 화면 줌은 거의 동일한 결과를냅니다.

CSS는 필요에 따라 확대 할 수 없지만 CSS와 JS를 결합하면 페이지를 더 크게 보이도록 일부 값을 변경할 수 있습니다. 그러나 현재까지이 기능은 최신 브라우저에서 표준으로 제공되므로 복제 할 필요가 없습니다. 실제로 복제하면 웹 사이트 속도가 느려집니다 (더 많은로드, JS 또는 CSS가 구문 분석 또는 실행 및 적용되는 등).

CSS 속성을 통해 전체 페이지를 확장하는 다음 코드가 있습니다. 중요한 것은 가로 스크롤을 피하기 위해 body.style.width를 줌의 역수로 설정하는 것입니다. 또한 문서의 왼쪽 상단을 창의 왼쪽 상단에 유지하려면 transform-origin을 왼쪽 상단으로 설정해야합니다.

        var zoom = 1;
        var width = 100;

        function bigger() {
            zoom = zoom + 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }
        function smaller() {
            zoom = zoom - 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }