실제 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를 사용할 수 있습니다.
- "about : config"로 이동합니다.
- "layout.css.devPixelsPerPx를 찾습니다.
- 원하는 비율로 변경하십시오 (일반은 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 기반 미디어 쿼리가 트리거됩니다. 따라서 이보다 쉬운 접근 방식으로 충분할 수 있지만 기능이 파이어 폭스의 "수정되지 않음" 버그로보고 되므로 변경 될 수 있습니다.
Google 크롬 버전 '33 .0.1720.0 Canary '에서 이제 '기기 픽셀 비율 ','안드로이드 글꼴 측정 항목 '및'뷰포트 에뮬레이션 '과 같은 다양한 다양한 변수를 사용하여 iPhone5 및 기타 기기와 같은 기기를 에뮬레이션 할 수 있습니다. .
더 이상 Firefox 해킹이 필요하지 않습니다. 어쨌든 작업하기가 어렵습니다.
감사합니다 Google 개발자 팀! ! :)
크롬에서는 다음과 같이 할 수 있습니다.
1) 크롬 개발자 도구를 작은 "톱니 바퀴"아이콘을 클릭합니다. 
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/
덜 관련성
Apple의 Retina 앰퍼를위한 디자인 방법
http://www.studiopress.com/design/retina-display-design.htmRetina 앰퍼를위한 웹 사이트 구축 : 픽셀로 친구 만들기
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 버전의 경우 디버깅 중에 동적 워터 마크를 추가합니다. 이렇게하면 고해상도 이미지가 실제로 표시되는지 여부를 매우 쉽게 확인할 수 있습니다. 매우 유용하다는 것을 알게되었습니다.
작동 방식은 다양하므로 샘플 코드를 포함하지 않습니다.
이것이 너무 간단한 지 모르겠습니다. Ctrl 키를 누르고 스크롤하면 미디어 쿼리가 트리거됩니다. 나는 그것을 bugzilla에서 확인했고 작동합니다. 흐릿하게 보이므로 svg 배율에 대해서는 잘 모르겠지만 SVG 이미지입니다.
Mac (또는 mac osx 가상 머신)이있는 경우 xcode와 함께 ios 에뮬레이터를 사용할 수 있습니다. 창을 두 배나 크게 부풀리기 때문에 실제처럼 보이는 것이 아니라 이미지가 흐릿한 지 아닌지 명확하게 보여줍니다.
'ProgramingTip' 카테고리의 다른 글
| jsonSchema 속성이 조건부 필요 (0) | 2020.10.11 |
|---|---|
| “VM 초기화 중에 오류가 발생했습니다. (0) | 2020.10.11 |
| ArrayList에서 항목의 고급를 찾는 더 좋은 방법은 무엇입니까? (0) | 2020.10.11 |
| NoSuchFieldError : 클래스 Lcom / disdemo / R $ id에 유형 I의 정적 필드 listView1이 없습니다. (0) | 2020.10.11 |
| C에서 긴 printf 문을 여러 줄로 나눌 수 있습니까? (0) | 2020.10.11 |