권장 웹 사이트 해상도 (너비 및 높이)? [닫은]

일반적인 웹 사이트 해상도에 대한 표준이 있습니까?

최소 1280px 너비의 최신 모니터를 대상으로하지만 높이는 다를 수 있으며 각 브라우저는 도구 모음 높이도 다를 수 있습니다.

이것에 어떤 종류의 표준이 있습니까?

요즘 조언은 다음과 같습니다.

1024x768에 최적화하십시오 . 대부분의 사이트에서 이것은 대부분의 방문자에게 적용됩니다. 대부분의 로그에 따르면 방문의 92-99 %가 폭이 1024 이상일 것입니다. 1280이 점점 보편화되고 있지만 여전히 1024와 그보다 낮은 부분이 있습니다. 이를 위해 최적화하되 다른 것을 무시하지 마십시오.

1024 = ~ 960 . 스크롤바, 창 가장자리 등을 고려하면 1024x768 화면의 실제 너비는 약 960 픽셀 입니다. 일부 도구는 약간 더 작은 크기 (약 940)를 기반으로합니다 . 트위터 부트 스트랩 의 기본 컨테이너 너비입니다 .

하나의 크기로 디자인하지 마십시오 . 창 크기는 다양합니다. 화면 크기가 창 크기와 같다고 가정하지 마십시오. 합리적인 최소값으로 설계하되 조정될 것이라고 가정합니다.

반응 형 디자인과 유동적 인 레이아웃을 사용 합니다. 창 크기를 조정할 때 조정되는 레이아웃을 사용합니다. 사람들은 특히 대형 모니터에서이 작업을 많이합니다. 이것은 좋은 CSS 연습 일뿐입니다. 이를 지원하는 몇 가지 프런트 엔드 프레임 워크가 있습니다.

모바일을 일류 시민으로 대하십시오 . 항상 모바일 장치에서 더 많은 트래픽을 받고 있습니다. 이것은 더 많은 화면 크기를 소개합니다. 여전히 960으로 최적화 할 수 있지만 반응 형 웹 디자인 기술을 사용하면 페이지가 화면 크기에 따라 조정됩니다.

로그 브라우저 표시 정보 . 이것에 대한 실제 수치를 얻을 수 있습니다. 여기 와 여기 그리고 여기 에서 몇 가지 숫자를 찾았 습니다 . 동일한 데이터를 수집하도록 사이트를 리깅 할 수도 있습니다.

사용자가 스크롤하므로 높이에 대해 많이 걱정하지 마십시오 . 오래된 주장은 사용자가 스크롤하지 않고 중요한 것은 "스크롤없이 볼 수있는 부분"이어야한다는 것입니다. 이것은 몇 년 전에 뒤집 혔습니다. 사용자는 많이 스크롤합니다 .

화면 해상도에 대한 추가 정보 :

• 화면 해상도 및 페이지 레이아웃
• 웹 사이트 디자인을위한 최고의 화면 해상도
• 화면 크기가 아닌 브라우저 크기를위한 디자인

반응 형 디자인에 대한 추가 정보 :

• 반응 형 웹 디자인 (2010, 5 월 25 일), Ethan Marcotte, A List Apart.
• Wikipedia의 반응 형 웹 디자인
• 다중 장치 레이아웃 패턴 (2012, 3 월 14 일) Luke Wroblewski. 적응 가능한 다중 장치 화면 레이아웃에 가장 많이 사용되는 패턴을 카탈로그 화합니다.

반응 형 디자인 및 유동적 레이아웃을위한 도구 및 프런트 엔드 프레임 워크 :

• 트위터 부트 스트랩
• Zurb 재단
• 반응 형 웹 디자인을위한 50 가지 환상적인 도구 (2012, 4 월 24 일) Denise Jacobs & Peter Gasston

나쁜 생각이라고 생각합니다. 레이아웃에서 콘텐츠를 분리하는 요점은 웹 페이지를 모든 종류의 브라우저에 표시 할 수 있도록하는 것입니다.

최소 화면 크기와 같은 인위적인 제한을두면 시장이 제한됩니다.

그렇긴하지만 모든 데스크톱이 1024x768을 표시 할 수 있어야한다고 생각합니다. 그러나 iPhone 또는 기타 화면 문제가있는 장치에서 실행되는 브라우저 또는 브라우저에 전체 데스크톱을 사용하지 않는 브라우저는 어떻습니까?

귀하의 특정 질문에 대한 대답으로, 아니오, 브라우저의 최소 또는 공통 표시 영역에 대한 표준이 없다고 생각합니다.

사용자가 가로로 스크롤하도록 강요하는 것은 심각한 UI 위반입니다. 화면 크기가 알려진 인구를 위해 특별히 웹 사이트를 구축하지 않는 한, 디자인이 800 픽셀 너비의 작은 화면 (메모리가 제대로 작동하는 경우 웹 서핑 인구의 약 8 %)에서 작동하도록하는 것이 가장 안전합니다. 더 큰 화면에 잘 적응하도록 만드는 것이 현명하지만 여전히 800x600으로 서핑하는 사람들의 대가를 치르지 않습니다.

고려해야 할 또 다른 사항이 있습니다. 모든 사람이 전체 화면에서 브라우저를 실행하는 것은 아닙니다 (그렇지 않습니다). 따라서 특정 (그리고 큰) "화면 크기"를 위해 디자인해도 괜찮다는 생각은 여러 가지 이유로 작동하지 않습니다.

2010 년 12 월 15 일 업데이트 :이 질문에 처음 답변했을 때 800 픽셀이 적절한 대답이었습니다. 그러나이 시점에서는 1024 픽셀 (또는 다른 사람이 지적한대로 960 픽셀)을 권장합니다. 기술은 ...

다음은 2008 년의 브라우저 디스플레이 통계입니다. http://www.w3schools.com/browsers/browsers_display.asp

약 50 %의 사용자가 여전히 1024x768을 사용하고 있습니다. 사이트를 고해상도로 멋지게 보이게하려면 유연한 레이아웃을 사용하세요.

실제로 너비에 대한 산업 표준이 있습니다 (적어도 yahoo에 따르면). 지원되는 너비는 750, 950, 974, 100 %입니다.

미리 정의 된 그리드 (열 레이아웃)에 대해 이러한 너비의 장점이 있으며 광고를 포함하는 경우 표준 크기와 잘 작동합니다.

볼만한 가치가있는 재미있는 이야기.

YUI Base 참조

다음은 멋진 도구입니다. Google Labs 브라우저 크기

사용자가 800x600 해상도의 모니터 만 가질 것으로 기대해야합니다. 캐나다 정부는이를 ​​요구 사항 중 하나로 나열하는 표준을 가지고 있습니다. 멋진 와이드 스크린 모니터를 사용하는 사람에게는 이것이 낮게 보일 수 있지만 모든 사람이 멋진 모니터를 가지고있는 것은 아닙니다. 여전히 많은 사람들이 1024x768로 실행되는 것을 알고 있습니다. 특히 여행 중에 저렴한 웹 카페에서 800x600으로 실행하는 사람을 만나는 것은 드문 일이 아닙니다. 또한 원하지 않는 경우 브라우저 창을 전체 화면으로 만드는 것도 좋습니다. 더 넓은 모니터에서 사이트를 더 넓게 만들 수 있지만 사용자가 가로로 스크롤하지 않도록합니다. 이제까지. 저해상도 지원의 또 다른 장점은 사이트가 휴대폰에서 작동하고 Nintendo Wii가 훨씬 쉽다는 것입니다.

최소 1280 너비에 대한 메모는 너무 선외라고 말해야 할 것입니다. 대부분의 17 인치 및 내 19 인치 비 와이드 스크린 모니터는 최대 1280x1024의 해상도 만 지원합니다. 그리고 지금 제가 타이핑하고있는 14 인치 와이드 스크린 노트북은 가로 1280 픽셀에 불과합니다. 나는 당신이 노력해야 할 가장 큰 최소 해상도는 1024x768이지만 800x600이 이상적이라고 말하고 싶습니다.

지금까지의 모든 답변은 데스크톱 모니터에 대해 이야기하지만 iPhone에서 스택 오버플로를 사용하고 있으며 1024 또는 1280 수평 픽셀을 타겟팅하여 모바일 플랫폼을 제외해서는 안된다고 생각합니다. 페이지를 마크 업하여 브라우저가 그 모든 의미를 알 수 있도록하고 스크린 리더와 생각하지 못한 다른 키트에서도 무료로 사용할 수 있도록합니다.

특정 해상도를 목표로하지 않고 다양한 해상도에 쉽게 적응하는 것이 가장 좋습니다.

상당히 널리 사용되고있는 것으로 보이며 Google Analytics에서 얻은 수치로 뒷받침되는 가이드 라인은 너비가 1024 픽셀, 높이가 768 픽셀 (1024x768) 인 화면에서 작동하도록 사이트를 디자인하는 것입니다. 1280x800은 우리가 보는 가장 일반적인 해상도로 전체 트래픽의 70 % 이상을 차지합니다.

그렇기 때문에 약 1000 픽셀 너비의 중앙 열을 사용하고 상위 500-600 픽셀에 가장 중요한 콘텐츠가있는 많은 사이트 (이 사이트 포함)가이 크기의 화면에서 볼 때 스크롤없이 볼 수있는 부분 위에 표시됩니다.

1000 픽셀 너비의 레이아웃을 사용하면 너비가 최대 약 1680 픽셀 인 화면 크기 (대형 17 인치를 제외하고는 일반적으로 노트북에서 볼 수있는 높이)에서 상당히 잘 작동하지만 1920 픽셀에서는 약간 어리석은 것처럼 보입니다. 넓은 것 (고급 컴퓨터, 일반적으로 워크 스테이션), 그러나 이러한 매우 높은 해상도는 일반 인터넷에서 트래픽의 많은 비율을 차지하지 않습니다-2 % 이하 (반면에이 사이트와 같은 전문 청중이있는 경우) , 해상도가 높은 수치는 다소 높을 수 있습니다.)

최상의 너비는 1024까지 가능하지만 다양한 브라우저 설정 (탐색 도구 모음, 책갈피 도구 모음, 상태 도구 모음 등)에 대한 계정 높이를 조정하고 작업 표시 줄 설정을 고려해야합니다. 768을 약 550으로 빠르게 떨어 뜨릴 것입니다.

대상 브라우저 크기에 관계없이 위와 같이 브라우저 도구 모음, 상태 표시 줄 및 스크롤 막대를위한 공간을 포함해야합니다. Internet Explorer (IME)는 종종 도구 모음과 상태 표시 줄에 100px 이상의 세로 공간이 있습니다. 일반적으로 1024 x 768로 촬영하는 경우 안전을 위해 약 960-980px 너비와 600px 높이의 디자인을 만들려고합니다. 그렇게하면 필요한 경우 스크롤링과 멋진 공백 (디자인에 필요한 경우)을 수용 할 수 있습니다. 특정 크기를 대상으로해야하는 인스턴스에는 YUI 그리드를 적극 권장합니다.

YUI 그리드

나는 디자이너로부터 너비뿐만 아니라 '접힌 부분 위에 모든 것을 유지하기 위해 사용할 높이'에 대해 많은 질문을받습니다. 최근에 제가 한 답변이 있습니다.

너비의 경우 디자이너는 아니지만 960px 너비가 요즘에는 잘 어울리고 대부분의 디스플레이에 잘 맞는 열로 나뉘어지기 때문에 사용하는 방법이라는 것을 읽었습니다. 가능하다면 유동적 인 레이아웃을 디자인하십시오.하지만 이것은 디자이너, CSS 기술, 이미지 및 텍스트 양에 따라 항상 실용적인 것은 아닙니다.

(항상 한 줄에 65-80 자, 줄 높이는 약 1.15). 이것은 텍스트에 대한 최적의 열 너비이며 매우 넓거나 좁은 열보다 훨씬 빠르고 읽기 편한 것으로 입증되었습니다.)

'스크롤없이 볼 수있는 부분'에 대해서는 웹에서 이러한 개념을 사용하지 않도록주의해야합니다. 수평 스크롤은 피할 수 있고 피해야하지만 수직 스크롤은 100 % 피할 수 없습니다. 내가 말할 수있는 것은 1024x768 디스플레이 (최소 95 %의 사용자가 그 이상을 가지고 있음)에서 600px 높이의 고정 블록으로 괜찮아 야한다는 것입니다. 그러나 많은 다른 디스플레이 형식이 있으며 브라우저 크롬은 많은 공간을 차지할 수 있으며 모든 사람이 브라우저 창을 최대화하는 것은 아닙니다.

여기에 다소 똑같은 말을하는 다른 사이트가 있습니다.하지만 모든 사람을 위해 모든 것을 '스크롤없이 볼 수있는 부분'으로 설정하는 것은 어렵습니다. 실제 통계에 따르면 400px 정도 밖에되지 않을 수 있기 때문입니다.

그리고 마지막으로 아주 자세하게 들어가는 좋은 긴 기사 (더 많이 게시하지만 너무 멍청 하다고 말합니다)- 브라우저 크기를 디자인하는 방법-baekdal.com

저는 개인적으로 항상 페이지 중앙에있는 최대 너비 1000px (왼쪽 / 오른쪽 여백 : 자동)를 고수했습니다.

1024x768 미만에서 실행중인 경우 업그레이드 할 때입니다. 진지하게. 거의 2010 년입니다. 기본 해상도가 1280x1024 인 저렴한 LCD 모니터를 구입할 수 있습니다.

미디어 쿼리를 살펴 보시기 바랍니다. 이것은 정말 의미있는 CSS에 대한 유용한 새로운 추가입니다. 왜 이것이 이전에 구현되지 않았는지 궁금 할 것입니다. 기본적으로 CSS를 통해 직접 브라우저 속성 (예 : 최대 및 최소 너비)을 대상으로 지정하고 거기에서 레이아웃 코드를 분기 할 수 있습니다. 인쇄 스타일 시트를 만드는 것과 유사하게 동일한 파일에서 데스크톱 및 모바일 레이아웃을 병렬로 만들 수 있으므로 개발에 큰 도움이됩니다.

예를 들어 신체 배경 이미지와 일치해야하는 배경 이미지를 사용하는 경우 유연하거나 유동적 인 레이아웃은 디자인을 약간 제한합니다.

차라리 사이트에 대해 다른 CSS 레이아웃을 만들고 사용자의 해상도에 따라 적용하도록하거나 가능하지 않은 경우 (아직 파고 들지 않은 경우) 선택 가능한 옵션으로 만듭니다.

좋아, 여기에 많은 잘못된 정보가 있습니다. 우선 특정 해상도 (예 : 800x600)를 사용하여 웹 페이지를 만들면 해당 해상도 만 사용하여 페이지가 제대로 렌더링됩니다! 다른 사람의 노트북이나 가정용 PC 모니터에 동일한 페이지가 표시되면 페이지를 디자인 할 때 사용한 해상도가 아니라 해당 화면의 현재 해상도를 사용하여 페이지가 표시됩니다. 특정 해상도를위한 웹 페이지를 만들지 마십시오! 웹 디자인에는 존재하지 않는 "모든 크기에 맞는"시나리오를 기대하기에는 너무 많은 종횡비와 화면 해상도가 있습니다. 해결책은 다음과 같습니다. CSS3 미디어 쿼리를 사용하여 해상도 조정 가능한 코드를 만듭니다. 예를 들면 다음과 같습니다.

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

우리가 방금 한 것은 서로 다른 해상도로 렌더링되는 3 가지 스타일 세트를 지정하는 것입니다. 이 예의 경우 화면 해상도가 800px보다 크면 1024 용 CSS가 대신 실행됩니다. 마찬가지로 콘텐츠를 표시하는 화면이 1224px이면 1224가 1024보다 크므로 1280이 실행됩니다. 현재 작업중인 사이트는 800x600 ~ 1920x1080의 모든 해상도에서 작동합니다. 명심해야 할 또 다른 사항은 해상도가 같은 모든 모니터의 화면 크기가 같지 않다는 것입니다. 15.4 노트북을 나란히 놓을 수 있지만 둘 다 똑같아 보이지만 모든 픽셀이 다른 LCD 화면에서 같은 크기가 아니기 때문에 둘 다 해상도가 크게 다를 수 있습니다. 따라서 미디어 쿼리를 사용하고 특히 1280+ 이상의 고해상도 노트북 화면으로 웹 사이트를 만드십시오. 또한, 랩톱에서 다른 해상도를 사용하여 각 미디어 쿼리를 만듭니다. Windows의 해상도 설정을 사용하여 800x600을 낮추고 해당 해상도에서 미디어 쿼리를 만든 다음 1024x768로 전환하고 해당 해상도에서 다른 미디어 쿼리를 만들 수 있습니다. 나는 계속해서 갈 수 있지만 너희들이 요점을 이해해야한다고 생각한다.

업데이트 : 다음은 미디어 쿼리를 사용 하는 모바일 장치를위한 혁신적인 웹 디자인을 설명하는 데 도움이되는 미디어 쿼리 사용 링크입니다.

이 튜토리얼은 모든 장치를 디자인하는 방법을 보여줍니다. 특히 미디어 쿼리에 대한 자습서도 있습니다. 저는 전체 사이트를 모든 장치, 모든 화면 및 하위 도메인없이 CSS 만 사용하는 모든 해상도에서 렌더링하도록 개발했습니다! 저는 태블릿과 스마트 폰에 대한 지원 작업을 계속하고 있습니다. 이 사이트는 모든 랩톱이나 50 인치 LCD TV에서 완벽하게 렌더링되며 많은 페이지가 모든 모바일 장치에서 완벽하게 작동합니다. 모든 코드를 페이지에 넣으면 페이지가 빠르게로드됩니다! 또한 CSS "background-size : cover;"에 대한 해당 기사의 토론에주의를 기울여야합니다. 또는 "포함"속성을 사용하면 배경 그래픽을 유동적으로 만들고 모든 해상도에서 완벽하게 렌더링 할 수 있습니다.

사이트 자습서를 따르고 모든 것을 렌더링하는 단일 웹 페이지를 만들 수 있습니다!

최소 너비로 1024를 타겟팅하십시오. 800에서 어떻게 보이는지 시도하지만 너무 많이 신경 쓰지 마십시오. 800x600에서는 거의 모든 주요 웹 사이트가 작동하지 않으므로 해당 해상도로 작업하는 사람들은 어쨌든 항상 문제를 겪을 것입니다.

유동적 인 레이아웃을 사용하려는 경우 텍스트가 너무 넓어 지지 않도록하십시오. 줄이 너무 길면 읽기가 어려워지기 때문입니다. 이것이 대부분의 웹 사이트가 고정 된 너비를 갖는 주된 이유입니다.

1024 픽셀 모니터를 대상으로합니다 (하지만 해당 공간의 100 %를 사용하지 않음). 나는 800x600을 포기했습니다. 공간을 낭비하여 모든 사람을 새로운 장비로 처벌하는 대신 필요한 경우 스크롤하도록하여 오래된 하드웨어로 소수를 처벌하고 싶습니다.

나는 그것이 당신의 청중과 당신의 앱의 성격에 달려 있다고 생각합니다.

궁극적으로 이것은 마크 업에 대한 표준이나 모범 사례의 문제가 아니라 청중을 아는 것입니다. 파악하고 웹 사이트가 원하는 작업을 수행하는지 확인하는 것입니다.

화면 해상도보다는 브라우저 뷰포트의 너비를 고려하는 것이 더 중요합니다. 디스플레이의 모든 픽셀이 브라우저에 할당 될 것이라고 가정 할 수는 없습니다 (그렇더라도 브라우저 크롬을 빼야합니다). 브라우저 너비를보고하는 분석에 액세스 할 수있는 경우 ( nb 브라우저 폭이 아니라 화면 해상도)를 매우주의를 지불해야합니다.

가능한 가장 넓은 범위의 뷰포트를 수용하는 것이 좋지만 몇 가지 제한 사항이 있습니다. 일부 문제는 CSS 미디어 유형 으로 처리 할 수 ​​있지만 일부는 처리 할 수 없습니다. 일부는 유동적 인 레이아웃으로 처리 할 수 ​​있습니다. 그러나 유동적 레이아웃은 표시 할 정보 유형, 줄 길이, 읽기 편의성 등에 따라 모든 상황에서 작동하지 않습니다 . 일부 유동적 레이아웃은 와이드 디스플레이에서 작동하지 않습니다. 대부분의 경우 특정 너비 이하로 크기가 끊어집니다 .

개인적으로 960 픽셀 이상의 뷰포트를 디자인하고 싶은만큼 항상 그렇게 할 수는 없습니다. 따라서 어떤 경우에는 760 픽셀 미만의 뷰포트 (800 픽셀 너비 디스플레이, 최대화 됨)로 디자인하는 것이 여전히 가장 안전합니다. 드디어이 제한을 한 번에 끝낼 수는 있지만 최소한 데스크톱의 경우에는- 매우 빠르게 접근하고 있습니다.

전환이 문제가되고 너비가 고정 된 레이아웃이있는 경우 금전 등록 기가 760 번째 동쪽 어디든 "카칭"으로 이동하기 위해 사용자가 클릭해야하는 모든 항목을 넣는 것이 좋습니다. 픽셀.

기본 탐색도 마찬가지입니다.

마지막으로, 손에 넣을 수있는 모든 것에서 레이아웃을 테스트하십시오. 큰. 작은. 데스크탑. 핸드 헬드. 작품. 대용품이 없습니다.

내가 액세스 할 수있는 모든 클라이언트 사이트에서 화면 해상도 샘플을 가져 왔습니다. 여기에는 8 개 이상의 산업 분야에서 20 개 이상의 사이트가 포함되어 있습니다. 결과는 다음과 같습니다.
alt text http://unkwndesign.com/so/percentScreenResolutions.png
이것을 바탕으로 나는 그것이 긴 샷으로 여기에서 대다수이기 때문에 1024x768에서 잘 보이도록 말할 것입니다. 또한 높이에 대해 그다지 걱정하지 마십시오. 그러나 대부분의 페이지를 기본 글꼴 크기로 1-2 페이지 이상의 인쇄 페이지로 만드는 것을 피하십시오. 대부분의 사람들은 페이지를 그렇게 오래 읽지 않을 것이며 사용자가 차지하는 도구 모음을 설치하면 수직 공간, 내 개인적인 선호는 그것이 그들의 문제라는 것이지만 나는 그것이 큰 문제라고 생각하지 않습니다.

* 백분율은 반올림으로 인해 100.05 %가됩니다.

해상도가 높을수록 인터넷 브라우저가 최대화 될 가능성이 줄어 듭니다.

그리고 일부 브라우저에는 측면 막대도 있습니다.

렌더링하려는 항목에 따라 다르지만 약 800-900 너비에서 끊지 않는 가변 너비 레이아웃을 사용합니다.

높이는 실제로 문제가되지 않습니다.

sbeam은 '항상 한 줄에 65-80자를 원합니다'라고 말했습니다. 그것은 사실이 아닙니다. 예를 들어, Wikipedia는 한 줄에 180 자일 수 있습니다. 아니면 특정 웹 사이트를 의미 했습니까?