고해상도 화면을 시뮬레이션하는 방법은 무엇입니까? [닫은]

94

브라우저가 내 화면보다 높은 해상도로 내 웹 사이트를 테스트 할 수있는 방법이 있습니까?

예 : 1440 x 900 화면이 있고 1920 x 1200, 1920 x 1080 등으로 웹 사이트를 테스트하고 싶습니다.

html css resolution

— HappyDeveloper
소스

@deceze 실제로 그것은 아주 좋은 제안입니다. 960.gs와 같은 것의 요점은 픽셀 크기로 작업하면 디자인이 모든 곳에서 동일하게 보이고 화면 해상도에 따라 화면 공간의 양이 달라지기 때문입니다. 이음새가 정렬되어 있는지 확인하기 위해 전체 2 개 및 약간의 반복을 볼 수 있다면 가로로 반복되는 그래픽을 고해상도로 테스트 할 필요가 없습니다. 또는 매미 원리를 사용하여 더 흥미로운 것을 만들 수 있습니다.

— Endophage

1

@Endophage : 동의하지 않습니다. 유동적 인 레이아웃을 적절하게 구축하면 사용자 글꼴 크기 기본 설정과 관련하여 더 나은 결과를 얻을 수 있습니다. 모든 곳에서 똑같이 보이는 것은 필수가 아니라 픽셀 엿보기입니다.

— You

@ 당신은 글꼴 크기를 변경하는 유동적 인 레이아웃을 아직 보지 못했습니다. 고정 픽셀 너비가 좋은 이유는 사람의 눈이 특정 길이 이상의 라인을 스캔하는 데 어려움을 겪기 때문입니다 (약 12px 글꼴 크기에서 약 20 단어로 확인되었다고 생각합니다. 직접 찾아 볼 수 있습니다). 다른 이야기 인 전화 해상도로 내려가는 것에 대해 이야기하고 있지만 데스크톱 / 노트북 해상도에 대해 이야기하고 있다면 고해상도의 큰 화면을 가지고 창 크기를 조정하면 효과적으로 테스트하고 있습니다. 다른 해상도.

— Endophage

1

@Endophage : 따라서 너비가 40em아닌 을 사용 (또는 유사한 측정) 960px해야합니다. 12px 글꼴 크기가 너무 작다고 판단하고 Cmd-를 누르면 픽셀 크기가 조정되지 않습니다 +. 게다가 내 브라우저 창은 그대로 960px입니다.

— You

@ 당신은 실제로 Ctrl/Cmd +그것은 줌 기능이기 때문에 당신이 치면 픽셀 크기가 조정됩니다 . 바로 여기에서 시도해 볼 수 있습니다. 주요 콘텐츠 섹션의 너비는 960px입니다. 40em과 같은 것을 사용하면 화면 해상도로 확장되지 않습니다. em크기를 사용 하는 것은 재정의되지 않는 한 최상위 수준에서 최대 1em / 16px까지 상속되는 부모 요소의 글꼴 크기에 상대적입니다 (죄송합니다. 읽기 : kyleschaeffer.com/best-practices/…

— Endophage 2011-06-21

76

[편집 : 먼저 브라우저의 devtools를 확인하세요! @SkylarIttner가 댓글에서 지적했듯이 반응 형 디자인 테스트 도구는 아래 솔루션이 게시 된 이후 대부분의 브라우저에서 출시되었습니다. 지금은 가장 좋은 / 가장 쉬운 옵션 일 것입니다.]

당신은 내가 틀렸다면, 단지와 iframe이를 만들 날 수정 수 style="desired width & height"와 src="your/test.site"의 유일한 자식으로 <body>. 해상도가 지정된 너비 / 높이 인 것처럼 사이트를 표시하고이를 검사하기위한 스크롤 막대가 표시되어야합니다.

직접 설정해야하는 타사를 사용하는 것만 큼 편리하지는 않지만 인터넷 연결없이 로컬에서 테스트 할 수 있다는 장점이 있습니다.

— 코디 크럼 린
소스

5

왜 .. 천재라고 말해야 겠네요. +1

— Mafia 2013 년

물론이야! 감사합니다! ^^

— Oskar Duveborn

충분히 감사 할 수 없습니다!

— Rahman Sharif

1

긍정적 인 피드백을 주신 모든 분들께 감사드립니다. 도움이 될 때를 아는 것이 좋습니다.

— Cody Crumrine 2015 년

1

누구에게나 도움이 될 기회에 @Cody Crumrine이 제안한 것을 수행하는 샘플 코드가 있으며 Genius입니다 !! <iframe src = " site to test.com"width = "1024"height = "768"> </ iframe>

— Stuart

28

이 솔루션은 위에서 제안한 것보다 훨씬 빠릅니다.

http://www.infobyip.com/testwebsiteresolution.php

browsershots.org만큼 다재다능하지는 않지만 훨씬 빠릅니다 (몇 초 대 45 분 대기열).

— 카일
소스

이것은 나쁜 대답이 아닙니다. 그러나이 사이트는 데스크톱 컴퓨터에서 브라우저 창 크기를 조정하는 것만으로도 스스로 할 수없는 작업을 전혀 제공하지 않습니다. IMHO, 태블릿 및 휴대폰 용 페이지의 링크는 전혀 쓸모가 없습니다 ... 왜냐하면 작은 iPod 화면에서 내 1000 픽셀 너비의 사이트는 Mobile Safari에 의해 자동으로 크기 가 조정 되어 완벽하게 표시됩니다.

— Sparky

4

@ Sparky672, 개인적으로 브라우저 크기를 화면 해상도보다 크게 조정할 수 없습니다. OP는 1440에서 1920을보기를 요청했습니다. 방법이있을 수 있지만 infobyip의 솔루션만큼 쉬운가요? 내가 명백한 것을 간과하고 있다면 사과드립니다.

— Kyle

2

@ Sparky672에게 감사하고 문제 없습니다. 그러나 "그 사이트는 데스크톱 컴퓨터에서 브라우저 창 크기를 조정하는 것만으로도 스스로 할 수없는 일을 전혀 제공하지 않는다"는 의견을 삭제하면 안됩니까?

— Kyle

1

@ Sparky672, 수직은 어떻습니까?

— Kyle

1

나는 수직선을 사용하여 접힌 부분의 위와 아래에 무엇이 있는지 확인합니다. 이를 StatsCounter 및 MouseFlow와 결합하여 청중 중 몇 퍼센트가 무엇을 보는지 확인합니다. 스파키 사랑해! 제 말투를 잘못 읽는 것 같아요. 그리고 저는 도움이되고 싶었습니다. 아무도 내가 0 표와 댓글 목록으로 제공하는 솔루션을 조사하지 않습니다. 하지만 오 잘 ...

— Kyle

9

몇 가지 아이디어 :

브라우저 확대 / 축소 사용, 1024x768 50 % 확대 / 축소 = 2048x1536 시뮬레이션 해상도, Chrome이 이미지 크기 조정 등을 알고 있습니다. 읽기가 어려워 지지만 배치 등을 테스트하고 있다고 가정합니다.

또한 일부 스크린 샷 프로그램을 사용하여 일반 해상도 스크린 샷보다 더 높은 스크린 샷을 찍을 수 있습니다 (파이어 폭스의 파이어 샷을 사용하면이 작업을 수행 할 수 있었지만 해상도가 매우 높은 메모리 문제가 있었고 더 이상 무료가 아닙니다).

— StrangeWill
소스

6

과잉 일 수도있는 한 가지 해결책은 Xvfb 를 사용하는 것 입니다. 원하는 해상도와 색 농도를 설정하고 브라우저에서 페이지를로드하고 스크린 샷을 찍습니다.

— 유겐 콘스탄틴 딘카
소스

4

viewlike.us 또는 screen-resolution.com을 사용해보십시오 . 가능한 모든 해결 방법은 아니지만 최소한 가장 일반적인 해결 방법입니다.

나는 그들을 시도하지 않았지만 꽤 간단 해 보인다.

— 에디 쳉
소스

화면 해상도는 다음과 같이 표시합니다. "화면 해상도가 너무 작습니다. 선택한 팝업이 사용하는 화면 해상도에 비해 너무 큽니다. 화면 해상도는 1440 x 900 픽셀입니다. 열려고 시도한 팝업 창은 1920입니다. "1200 픽셀

— HappyDeveloper

우리처럼보기는 다음과 같이 던집니다. "금지됨이 서버에 액세스 할 수있는 권한이 없습니다. 또한 요청을 처리하기 위해 ErrorDocument를 사용하는 동안 404 찾을 수 없음 오류가 발생했습니다. Apache mod_fcgid / 2.3.6 mod_auth_passthrough / 2.1 mod_bwlimited / 1.4 FrontPage / 5.0.2.2635 Server at viewlike.us Port 80 "

— HappyDeveloper 2011 년

2

이것이 테스트의 정확한 해상도를 알려주지는 않지만 zoomChrome 또는 FF 의 도구를 사용하여 축소 할 수 있습니다. 이것은 고해상도 화면에서 사이트가 어떻게 보이는지에 대한 상당히 정확한 아이디어를 제공합니다.

— 제이슨 제나로
소스

2

사이트의 정적 스크린 샷 만 봐도 괜찮다면 http://browsershots.org/를 추천합니다.

화면 크기를 지정하는 기능과 기타 다양한 옵션을 포함하여 거의 모든 브라우저 / OS 조합에서 사이트의 스크린 샷을 볼 수있는 옵션을 제공합니다.

북마크 할 가치가 있습니다.

— Spudley
소스

1

당신이 시도 할 수 있습니다 wkhtmltoimage 임의의 해상도에서 스크린 샷을 걸릴 수 있습니다.

또한 KDE4에서는 화면 크기 이상으로 창을 확대 할 수 있습니다. Windows 7에서도 본 것 같습니다. 다른 OS에 대해서는 확실하지 않습니다.

— user123444555621
소스

1

IE9에서는 브라우저 창을 임의의 크기로 조정할 수 있습니다. 개발자 도구는 F12 키를 누르고 도구 | 크기를 조정하고 원하는 크기를 선택하십시오. 그런 다음 창이 화면보다 큰 경우 화면 밖의 창을 캡처 할 수있는 도구를 사용합니다. 이 기사는 Snagit이 이것을 할 수 있음을 나타내는 것 같습니다. 그런 다음 캡처 된 사진을 살펴보십시오.

— 자코 브리 에스
소스