고밀도 망막 디스플레이를 지원하는 5 가지 방법

최근 게시물에서 Brendan Davis는 최근 게시물“Responsive Web Design and Scrollbars : Chrome의 구현이 더 좋습니까?”에서 흥미로운 점을 제기했습니다. 짧은 대답은 다음과 같습니다. 아니요 - 그러나 우리는 조금 더 깊이 파고들 수있는 문제를 살펴 봐야합니다.

. retina 란 무엇입니까?

"Retina"는 이중 밀도 화면의 Apple의 브랜드 이름이지만 다른 제조업체는 유사한 디스플레이를 생성하고 있습니다. 이 기술은 최근 iPhone, iPad, MacBook Pro 및 기타 고급 장치에서 사용됩니다. 예를 들어, MacBook Pro 15 ″의 해상도는 인치당 2,880 × 1,800 또는 220 픽셀입니다. 이 규모에서 대부분의 사람들은 일반적인 시청 거리에서 개별 픽셀을 알 수 없습니다. 응용 프로그램과 웹 사이트는 너무 작아서 사용하기에는 너무 작습니다. 따라서 장치는 1,440 × 900의 표준 해상도로 되돌아갑니다. 그러나 추가 픽셀을 사용하여 글꼴과 그래픽을 더 매끄럽게 보이게 할 수 있습니다. . 문제는 무엇입니까? 표준 해소 비트 맵 이미지는 망막 디스플레이에서 차단할 수 있습니다. 400 x 300 사진은 800 x 600 픽셀로 스케일링되지만 추가 세부 사항은 없습니다. 이것은 매끄러운 글꼴 및 기타 고해상도 이미지와 비교할 때 눈에 띄게 될 수 있습니다. 실제 사용량 웹을 둘러 보면 모든 사람이 망막 디스플레이를 가지고 있다고 생각하는 것을 용서할 수 있습니다. 현재 고급 장치에서만 사용할 수 있지만 개발자가 탐욕스럽게 사용하므로 불균형적인 양의 온라인 토론으로 이어집니다. 현실 세계에서 비슷한 디스플레이를 사용하는 사람들의 비율은 단일 수치가 낮습니다.

컨텍스트에 참여합시다 : IE6/7 사용자의 1%를 개발하지 않으면 Rentina를 사용하는 사람들에 대해 너무 걱정하지 않아야 할 것입니다. 특히 웹 사이트를 볼 수 있기 때문입니다.

. 즉, 망막과 같은 화면은 결국 모든 장치로 마이그레이션 할 것입니다. 지금 걱정할 이유는 거의 없지만 전진 계획에는 해를 끼치 지 않습니다. 추천 순서대로 옵션을 살펴 보겠습니다…

1. SVGS 및 CSS3 효과

를 사용하십시오 단서는 이름에 있지만 확장 가능한 벡터 그래픽은… 개별 픽셀보다.

SVG는 사진에 실용적이지 않지만 로고, 다이어그램 및 차트에 이상적입니다. 주요 단점은 IE8 이하의 지원 부족이지만 항상 PNG 폴백을 제공하거나 Raphaël 또는 SVGWeb와 같은 심을 사용할 수 있습니다. 참조 : 웹 페이지에 확장 가능한 벡터 그래픽을 추가하는 방법.

일부 이미지를 완전히 교체 할 수도 있습니다. 예를 들어, 그래픽으로 정의 된 타이틀, 그라디언트, 코너 또는 그림자는 CSS3 단독을 사용하여 재현 할 수 있습니다. 그들은 더 나은 품질로 렌더링하고, HTTP 요청이 적고 대역폭을 적게 사용합니다.

.

2. WebFonts Icons 를 사용하십시오 웹 폰트 아이콘을 더 많이 사용할수록 더 많이 좋아합니다. SVG와 마찬가지로 글꼴은 벡터이므로 확장 가능하므로 아이콘이 포함 된 글꼴 세트를 사용할 수 있습니다. 이메일 봉투, 전화, 위젯 컨트롤 및 소셜 미디어 로고와 같은 작고 자주 사용되는 모양에 이상적입니다. 또한 IE6을 포함한 모든 브라우저에서 작동합니다 다양한 상업용 및 무료 아이콘 글꼴 세트가 있습니다.

타이프

font awesome 상징적 인

재단

또는 We Love Icon Fonts와 같은 호스팅 글꼴 서비스를 사용할 수 있습니다. Fontello 또는 Icomoon과 같은 온라인 도구를 사용하여 나만의 작은 사용자 정의 아이콘 세트를 만드는 것이 좋습니다.

3. 실용적 일 때 고해상도 이미지를 사용하십시오 Retina는 표준 화면보다 4 배 더 많은 픽셀을 가지고 있습니다. 400 x 300 이미지 (120,000 픽셀)가있는 경우 고밀도 디스플레이에서 잘 렌더링하려면 800 x 600 대안 (480,000 픽셀)을 사용해야합니다. 그러나 그러나 고해상도 파일 크기가 반드시 4 배 더 클 수는 없습니다. 모든 이미지가 다르지만 생략 할 수있는 단단한 색상 또는 세부 사항이 포함되어 있으면 800 x 600 이미지를 사용하여 브라우저에서 스케일링하는 것이 실용적 일 수 있습니다. 실용적 : 표준 이미지가 200KB이고 고해상도 버전이 250KB 인 경우 이미지 교체 기술을 사용하는 무시할만한 이점이 있습니다. 더 나은 버전을 사용하십시오

4. CSS 이미지 교체

를 사용하십시오 이미지의 고해상도 버전이 4 배나 더 큰 경우가 있습니다. 이러한 상황에서는 이미지 교체 기술을 고려할 수 있습니다. 즉, 표준 이미지는 망막 디스플레이에서 더 큰 대안으로 대체됩니다. 다음 미디어 쿼리 코드를 사용할 수 있습니다
• 단점 :
두 개의 이미지 세트를 생성하고 유지해야합니다.
• 일부 브라우저는 두 이미지를 모두 다운로드합니다
이 사용자 중 다수는 느린 모바일 네트워크에서 스마트 폰이나 태블릿을 사용할 것임을 기억하십시오. 연결 속도를 감지하는 것은 픽셀 밀도를 결정하는 것보다 더 유리합니다.
• 5. javaScript 이미지 교체
를 사용하십시오 Retina 디스플레이 감지는 다음 코드를 사용하여 구현할 수 있습니다.
• 일단 망막 디스플레이가 결정되면 :
  모든 페이지 이미지를 통과하고 URL을 추출합니다 파일 이름에‘@2x’를 추가하고 ajax를 사용하여 결과 이미지 URL을로드하려고 시도하십시오. 발견 된 경우 현재 이미지를 고해상도 대안으로 바꾸십시오.
  1. 다행히도, 열심히 일은 retinajs.com에서 당신을 위해 이루어졌습니다. 4KB 무게 만 추가되지만 고밀도 디스플레이 장치는 이미지를 두 번 다운로드합니다. 페이지가로드 된 후 두 번째는 백그라운드 프로세스로 발생하지만
  . 내 조언 : 실용적으로 간단하게 유지하십시오. 비례 적으로 소수의 사용자가있는 장치에서 사소한 렌더링 문제를 해결하려고 시도하는 데 많은 시간을 소비하지 마십시오. 물론, 상사가 새로운 iPad를 받고 이미지 품질에 대해 불평하기 시작할 때 그 중 어느 것도 중요하지 않습니다.… 이 기사에 대한 의견이 닫힙니다. 망막 디스플레이에 대한 질문이 있습니까? 우리 포럼에서 물어 보지 않겠습니까?

위 내용은 고밀도 망막 디스플레이를 지원하는 5 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!