페이지의 크기를 조정하는 방법은 무엇입니까?

Question

메신저 웹 사이트 디자인 및 화면 해상도 문제가 있습니다. 내 페이지를 확장하고 싶지만 그럴 수 없다.

그것의 내 웹 사이트와 21.5 INC 맥 화면 (그것의 완료, 아무 문제)

그것의 내 노트북 ​​화면 1366 X 768 픽셀 해상도 ;

나는 CSS에서 이것을 tryed했다.

body, html {height:100%;} 

및 this on html;

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1"> 
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" /> 

없는 Doctype은 다음과 같습니다 XHTML 1.0 과도

하지만 나던 작품. 내가 어떻게 해?

감사합니다.

Answer 1

기본적으로 간단하고 쉬운 방법은 아닙니다.

뷰포트 태그는 데스크톱 브라우저와는 다른 방식으로 전체 페이지를로드하고 이동하는 모바일 장치 (현재)에만 해당합니다.

대부분의 웹 사이트는 수직으로 스크롤하도록 설계되었으므로 CSS는 수평 확장에 매우 적합하지만 수직으로 동일한 작업을 수행하는 데는 매우 적합하지 않습니다.

이렇게 할 수있는 한 가지 방법은 다양한 버전을 디자인 한 다음 미디어 쿼리를 사용하여 다양한 높이의 속성을 변경하는 것입니다.

#box { 
    width:100px; 
    height:100px; 
    background-color:red; 
} 

@media all and (max-height: 400px) and (min-height: 200px) { 
    #box { 
     background-color:green; 
    } 
} 

이 화면이 200 픽셀과 400 픽셀 높은 사이가 아닌, 빨간색 상자를 만들 것입니다 : 당신의 CSS에서

이는 것 같습니다. 이 기술을 사용하면 화면 크기가 다른 경우 다른 작업을 수행 할 수 있습니다. 요즘 꽤 잘 지원됩니다. (http://caniuse.com/#feat=css-mediaqueries- 기본적으로 IE8 이상).

다른 방법은 뷰포트 유닛을 사용하는 (vh 대신 px 또는 em) 브라우저 높이 1vh = 1 %이다. 그것은 현재 심하게 지원되고있는 슈퍼입니다 (http://caniuse.com/#feat=viewport-units- 파이어 폭스 없음, 오페라 없음, IE9 이상).

자바 스크립트를 사용하여 순환 메뉴의 높이를 조정하여 크기를 조정할 수 있습니다. jQuery는 JS를 아직 sussed하지 않았다면 살펴 봐야 할 대상이다.한마디로

하지만, 쉽게 일을 계속하려면 다음을주의 깊게 스크롤 600PX에 대해 서로 다른 동작을 정의 할 수 없습니다 수직

디자인 사이트를 스크롤

• 디자인 사이트, 768px, 720px 및 1080px 높은 화면을 (여기서 브라우저 크롬의 높이를 빼는 것을 잊지 마세요.

Answer 2

메타 태그 뷰포트를 사용해 보셨습니까?

<meta name="viewport" content="width=320"> 

Answer 3

html과 body의 높이를 100 %로 설정하고 있지만 높이와 너비는 어떻게됩니까? 요소의 이드 시체? 유동적으로 모든 화면 크기에 맞도록하려면 높이와 너비뿐 아니라 거의 모든 요소의 여백과 여백을 백분율로 지정해야합니다.