실제 Retina 디스플레이없이 Windows에서 Retina 용 웹 사이트를 테스트하는 방법은 무엇입니까?

Retina와 같은 HiDPI 디스플레이에 대한 웹 사이트를 테스트하기 위해 Windows에서 Retina 디스플레이를 시뮬레이션하는 방법이 있습니까?

저는 표준 24 "1920x1080 모니터에서 Windows를 실행합니다. 지난 밤에 친구의 새로운 15"Retina MacBook Pro에서 웹 사이트를 확인했는데 그래픽이 모두 흐릿 해 보였지만 (일반적인 15 인치 MacBook보다 훨씬 나빴습니다) 글꼴은 매우 선명하고 날카 로워 직접 비교하기 때문에 로고가 더욱 나빠집니다.

이 튜토리얼을 따라 웹 사이트 Retina를 준비했습니다.

http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

배경 이미지가 없기 때문에 retina.js 접근 방식을 사용했습니다.

이것이 실제로 작동하는지 테스트 할 수있는 방법이 있습니까? 당연히 친구에게 레티 나 노트북을 사용해달라고 부탁 할 수는 있지만 그것은 저에게 적합한 워크 플로우가 아닙니다. 최소한 내 환경에서 Retina 호환성을 위해 웹 사이트를 대략적으로 테스트 할 수 있기를 원합니다.

about : Firefox의 구성 해킹

실제로 Firefox를 사용할 수 있습니다.

1. "about : config"로 이동합니다.
2. "layout.css.devPixelsPerPx
3. 원하는 비율로 변경하십시오 (일반은 1, 망막은 2 등). -1은 기본값 인 것 같습니다.

스크린 샷 :

페이지 새로 고침-붐, 이제 미디어 쿼리가 시작되었습니다! 웹 개발에 대단한 파이어 폭스를 선택하세요! 참고로, 웹 사이트 크기가 이제 두 배로 늘어날뿐만 아니라 Firefox UI도 두 배로 늘어날 것입니다. 표준 픽셀 비율 화면에서 모든 픽셀을 검사 할 수있는 유일한 방법이므로이 두 배 또는 확대 / 축소가 필요합니다.

이것은 Firefox 21.0이 설치된 Windows 7과 Firefox 27.0.1이 설치된 Mac OS X에서도 잘 작동합니다.

미디어 쿼리 및 기타 고급 로직을 사용하지 않는 경우 (즉, 모든 사람에게 HiDPI 이미지를 제공하는 경우) 브라우저를 사용하여 200 %까지 확대 할 수 있습니다. Chrome 에뮬레이션은 유용한 도구 일뿐만 아니라 미디어 쿼리를 시작하지만 확대 / 축소를 방지하기 때문에 이미지 품질을 검사 할 수 없습니다.

Firefox 및 Edge에서 확대

현재 Firefox 및 Edge에서 확대 / 축소하면 dppx 기반 미디어 쿼리가 트리거됩니다. 따라서이 쉬운 접근 방식으로 충분할 수 있지만 기능이 Firefox의 "수정되지 않음" 버그로보고 되므로 변경 될 수 있습니다.

Google Chrome 버전 '33 .0.1720.0 Canary '에서 이제 '기기 픽셀 비율 ','안드로이드 글꼴 측정 항목 '및'뷰포트 에뮬레이션 '과 같은 훌륭한 매개 변수 집합을 사용하여 iPhone5 및 기타 기기와 같은 기기를 에뮬레이션 할 수 있습니다. .

더 이상 Firefox 해킹이 필요하지 않습니다. 어쨌든 작업하기가 어렵습니다.

감사합니다 Google 개발자 팀! ! :)

크롬에서는 다음과 같이 할 수 있습니다.

1) Chrome 개발자 도구를 열고 작은 "톱니 바퀴"아이콘을 클릭합니다.

2) 그런 다음 "콘솔 서랍에 '에뮬레이션'보기 표시"를 선택합니다.

3) 마지막으로 개발자 도구에서 "콘솔 드로어"를 열고 에뮬레이션을 선택합니다 . 집합 에뮬레이션 화면 및 설정 장치 픽셀 비율을 2.5.

내가 말할 수있는 한, 레티 나 장치를 구입하는 것 외에는 불가능합니다.

몇 가지 해결 방법

• 여기에서 제안 :

  • 이미지 크기를 두 배로 늘리고 비율이 여전히 동일하다면 거의 안전합니다. 테스트 할 레티 나 디스플레이가없는 경우 픽셀 비율 미디어 쿼리에서 너비 기반으로 전환하십시오.

  • 고해상도 콘텐츠 테스트 및 문제 해결
    http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html

• Retina MacBook Pro없이 HiDPI ( "Retina") 용으로 개발하는 방법
  http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/

• 워드 프레스 레티 나 이미지
  http://wpmu.org/wordpress-retina/

덜 관련성

• 반응 형, Retina 지원 웹 사이트를 만드는 방법

• Apple의 Retina 디스플레이를위한 디자인 방법
  http://www.studiopress.com/design/retina-display-design.htm

• Retina 디스플레이 용 웹 사이트 구축 : 픽셀로 친구 만들기
  http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making-friends-with-pixels

• 레티 나 디스플레이 용 웹 사이트를 어떻게 개발합니까?

• 망막을 준비하는 방법?

Google Chrome으로 Retina (HiDPI) 디스플레이를 에뮬레이션하는 현재 방법

1) 웹 페이지에서 " 오른쪽 클릭 "후 " 검사 "를 하여 Chrome의 개발자 도구를 엽니 다.

2) " Toggle Device Mode "아이콘을 클릭합니다.

3) 화면 상단의 장치 드롭 다운 상자에서 "를 선택 HiDPI 화면을 가진 노트북을 "

4) 이제 웹 사이트가 Retina 일명 HiDPI 화면에서 어떻게 보이는지 볼 수 있습니다.

이미지 크기 조정 라이브러리를 사용하여 이미지를 동적으로 만듭니다. 2x 버전의 경우 디버깅 중에 동적 워터 마크를 추가합니다. 이렇게하면 고해상도 이미지가 실제로 표시되는지 여부를 매우 쉽게 확인할 수 있습니다. 매우 유용하다는 것을 알게되었습니다.

이것이 작동하는 방식은 다양하므로 샘플 코드를 포함하지 않습니다.

Google 크롬 버전 80

1. 개발자 도구 열기 ctrl-shift j
2. 왼쪽 상단 의 태블릿 / 전화 아이콘 을 클릭하여 장치 도구 모음을 전환합니다 (클릭하면 파란색으로 바뀜).

3. 이제 뷰포트 위에 툴바가 있어야합니다. 오른쪽 상단의 옵션 아이콘 (점 3 개)을 클릭하고 장치 픽셀 비율 추가 옵션을 선택합니다.

4. 이제 도구 모음에 옵션이 표시됩니다. 여기에서 1x, 2x 또는 3x로 전환 할 수 있습니다.

5. 테스트 할 때 픽셀 비율을 변경할 때마다 새로 고침 버튼을 누르십시오. 비율을 2x로 설정 한 다음 다시 낮게 설정하면 브라우저가 이미 2x 이상을 가져 왔으면 1x 자산을 가져 오지 않기 때문에 변경 사항이 표시되지 않습니다.

이것이 너무 간단한 지 모르겠습니다. Ctrl 키를 누르고 스크롤하면 미디어 쿼리가 트리거됩니다. 나는 그것을 bugzilla에서 확인했고 작동합니다. 흐릿하게 보이므로 svg 배율에 대해서는 잘 모르겠지만 SVG 이미지입니다.

Mac (또는 mac osx 가상 머신)이있는 경우 xcode와 함께 ios 에뮬레이터를 사용할 수 있습니다. 창을 두 배나 크게 부풀리기 때문에 실제 생활에서 나타나는 방식은 아니지만 이미지가 흐릿한 지 여부를 명확하게 보여줍니다.