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

Program / 글쓴이

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

저는 표준 24 “1920×1080 모니터에서 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.

여기에 이미지 설명 입력

답변

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

몇 가지 해결 방법

덜 관련성

답변

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

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

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

장치 모드 전환 아이콘을 클릭합니다.

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

HiDPI 화면이있는 노트북 선택

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

답변

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

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

답변

Google 크롬 버전 80

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

여기에 이미지 설명 입력

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

여기에 이미지 설명 입력

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

여기에 이미지 설명 입력

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