Retina 디스플레이 용 웹 페이지를 테스트하는 방법은 무엇입니까?

Retina 디스플레이 용 웹 페이지를 테스트하는 방법은 무엇입니까?

---

레티 나 디스플레이 용 웹 페이지를 코딩했습니다. 저는 현재 레티 나 디스플레이 모니터가 없습니다.

레티 나 디스플레이 용 웹 페이지를 테스트하는 시뮬레이터 애플리케이션이나 도구가 있습니까?

아니면 애플의 레티 나 디스플레이와 유사한 모니터 (애플의 맥북이나 아이 패드가 아님)가 있습니까?

미리 감사드립니다.

---

about : Firefox의 구성 해킹

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

1. 이동 about:config
2. 찾기 layout.css.devPixelsPerPx
3. 원하는 비율로 변경하십시오 (1은 정상, 2는 망막 등).

스크린 샷 :

페이지 새로 고침-붐, 이제 미디어 쿼리가 시작되었습니다! 웹 개발에 대단한 파이어 폭스를 선택하세요!

이것은 Firefox 21.0이 설치된 Windows 7에서 수행되었습니다.

이 솔루션의 장점은 미디어 쿼리 및 기타 고급 로직을 트리거한다는 것입니다. 그렇게하지 않고 모든 사람에게 HiDPI 이미지를 제공하는 경우 Chrome 등으로 확대 할 수 있습니다 (또는 보트에 떠있는 경우 CSS를 작성하여 확대 / 축소).

Firefox 및 Edge에서 확대

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

---

Chrome 브라우저에서 레티 나 디스플레이가 작동하는지 여부를 확인할 수 있습니다.이 가이드를 사용하세요.

1. 연 Chrome Browser하고 right click다음을 클릭합니다inspect element
2. 하단 표시 줄에는 다음과 같은 탭이 있습니다. console, search, emulation and rendering
3. 탭을 클릭 한 emulation다음 아래와 같이 막대 탭을 위로 당깁니다.
4. 의 메뉴에 따라 left조정하고 장치, 화면 등을 조정합니다.

자세한 가이드는이 도움말을 확인하세요. http://www.gee.web.id/2014/09/how-test-retina-display-on-chrome.html

---

GitHub 에는 JavaScript Web Retina Emulator 가 있습니다.

Opera Mobile Emulator를 사용하여 사용자 지정 해상도를 테스트 할 수도 있습니다. 여기 에 방법에 대한 설명이 있습니다 .

레티 나 디스플레이가없는 구형 Apple 컴퓨터를 사용하는 경우 XCode 내부의 도구 인 Quartz Debug를 사용하여 레티 나 디스플레이를 시뮬레이션 할 수 있습니다. 또한 XCode에서 iOS 시뮬레이터를 사용하여 레티 나 디스플레이가있는 iOS 장치를 테스트 할 수 있습니다.

---

이 CSS를 추가 할 수 있습니다. 모든 것이 2 배 크기로 보이지만 문제가있는 경우 쉽게 찾을 수 있습니다. Javascript Web Retina Emulator가 작동하지 않았습니다 (Safari에서는 흐릿함).

body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

확대 / 축소 : 200 %는 webkit, -moz for firefox에 적용되므로 Safari / Chrome / Firefox는 작동하지만 IE에 대해서는 확실하지 않습니다.

-webkit-transform : scale (2)을 적용하면 사물이 흐릿 해 보일 것이므로 확대 / 축소를 사용해야합니다 : 200 %;

---

body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

그 코드만으로는 트릭을 할 수 없습니다. 미디어 쿼리를 사용하는 경우 픽셀 비율을 1.5 또는 2 대신 1로 전환하여 트릭을 수행해야합니다. 그렇지 않으면 이미지를 더 높은 해상도의 이미지로 전환하지 않습니다.

참고 URL : https://stackoverflow.com/questions/12243549/how-to-test-a-webpage-meant-for-retina-display