클라이언트의 브라우저 확대 / 축소를 어떻게 처리합니까?

페이지, 갤러리에 많은 이미지가 있습니다. 이미지가 선명하게 유지되기를 원하므로 브라우저 크기 조정을 수행하지 않고 이미지의 원래 크기를 사용합니다.

그러나 이는 브라우저 확대 / 축소 수준이 100 % 인 경우에만 작동합니다. 확대 / 축소 수준을 높이거나 낮추면 이미지 품질이 떨어집니다.

일부 클라이언트는 실제로 기본적으로 다른 확대 / 축소 수준을 갖습니다. 궁금해서 어떻게 처리하고 어떻게 처리 할 수 ​​있습니까?

건배

나는 다른 답변의 대부분이 점을 놓친 생각 :이 각 CSS 픽셀에 대한 할당 사용자의 장치의 일반적인 시나리오에서 하나 개 이상의 물리적 픽셀을 최고 품질의 이미지를 제공 관하여, 사용자 기본 설정을 재정의에 대한 아니다 일명 " 참조 픽셀 "를 이미지에 추가하면 브라우저가 이미지를 확대하여 픽셀 화되고 거칠게 만듭니다.

아래에 제안 된 솔루션이지만 먼저 다음과 같은 네 가지 방법이 있습니다.

• 가장 드문 경우 : 사용자가 확대를 선택합니다 . 그것은 큰 선택이 아닙니다. 왜냐하면 그들의 선택이기 때문입니다.
• 놀랍게도 일반적 : 사용자의 브라우저는 기본적으로 확대되어 있습니다. 예를 들어, 높은 픽셀 밀도의 많은 Windows 컴퓨터는 기본적으로 125 % 이상으로 확대되며 최근 Firefox에서는 (혼란스럽게!) 실제로 125 %로 확대했을 때 100 %로 확대되었음을 알려줍니다. , 왜 모든 것이 갑자기 거칠어 보이는지 궁금해하는 머리를 긁었습니다.
• 매우 일반적 : 대부분의 Android 기기 (및 기타 기기)의 픽셀 비율 은 1보다 큽니다. 즉, 모든 "CSS 픽셀"은 실제로 둘 이상의 물리적 픽셀을 사용하여 표시됩니다. 따라서 200 x 200 픽셀의 이미지 width: 200px; height: 200px;는 실제로 크기가 조정됩니다. 200 x 200 픽셀 이상에서 200 x 200 픽셀 크기의 이미지를 만들어 입자가 거칠어 질 수 있습니다.
• 매우 일반적입니다. 많은 최신 Apple 기기에는 " 망막 디스플레이 "가 있습니다. 이것은 본질적으로 픽셀 비율이 2 인 Android 장치와 동일하지만 더 나은 마케팅과 이름으로 감지 할 수있는 몇 가지 사용자 정의 속성이 있습니다.

이 중 어느 것도 John의 이미지 갤러리에서 놀랍도록 거친 결과를 초래할 것입니다.

나는 누군가이 문제에 대한 훌륭한 해결책을 갖기를 바랐지만 지금은 가장 효과가 있지만 보편적으로 가능한 최소의 것으로 시작하는 선호하는 옵션이 있습니다.

1. 가능하면 vector-SVG (또는 여전히 IE8을 지원해야하는 경우 Raphael.js)로 이동하십시오. 사실 이것은 아이콘, 다이어그램 등의 옵션 일 뿐이며 사진의 옵션은 아닙니다. 필요한 프로세싱으로 인해 저가형 모바일에서도 매우 복잡한 SVG가 복잡 할 수 있습니다.
2. 가능 하면 기기의 픽셀 비율을 감지하고이를 기반으로 이미지를 제공하십시오. Windows의 Firefox는 확대 / 축소 할 때 픽셀 비율의 판독 값을 변경하기 때문에 Windows의 Firefox 문제를 해결할 수도 있습니다. 단점은 서버와 클라이언트 측의 개발 작업과 관련된 까다로운 코딩 문제가된다는 것입니다.

3. 1과 2가 불가능하지만 실제로 중요하고 로딩 시간보다 이미지 품질이 더 중요하다면 이미지를 두 배로 늘리십시오.

   • Google이 홈페이지에서 로고로 수행하는 작업은 269px x 95px 컨테이너에 538px x 190px PNG 이미지를 스쿼시 한 ​​것입니다. 반응 형 이미지의 작동 방식과 거의 동일합니다.

   • 이전 버전의 IE는 이미지를 축소 할 때 끔찍하기 때문에 이것은 나쁜 습관으로 여겨졌지만 이제는 거의 사용되지 않으며 높은 픽셀 밀도 화면보다 훨씬 덜 일반적입니다. 이미지 크기가 커지고로드 시간이 길어지기 때문에 여전히 바람직하지 않습니다. 이는 사례별로 판단해야하는 절충입니다.

   • 두 배 이상의 크기를 가진 장치는 거의없고 200 % 이상으로 확대되는 사용자는 거의없고 이미지를 50 % 확대하는 것이 다른 양보다 깨끗하기 때문에 배가 크기는 일반적입니다.
4. 1, 2가 불가능하고로드 시간이 3보다 우선 순위가 너무 높으면 다른 옵션을 알지 못하며 인터넷의 절반 사이트에 동일한 문제가 있기 때문에 걱정하지 않는 것이 좋습니다. 사이트에서이 문제가있는 사용자는 다른 사이트에서도이 문제가 발생합니다. 지옥, Windows의 Firefox 는 자체 UI 버튼을 픽셀 화 합니다 ...

DA01이 언급 했듯이 그것에 대해 아무것도해서는 안됩니다.

확대 / 축소는 사용자가 지정한 옵션이므로 제어 할 수 있습니다. 그들이 엉망으로 만드는 설정은 당신의 책임이 아닙니다.

서로 다른 브라우저 및 버전과 그렇지 않은 것을 설명 할 수 있지만 합리적으로 말하면 사용자의 확대 / 축소를 설명해서는 안됩니다.

물론 125 % 또는 150 %를 차지할 수 있습니다 (필요하지 않아도 됨). 하지만 200 %, 300 %, 더? 이해가되지 않습니다.

사용자가 고 대비 창 테마를 사용하면 어떻게됩니까? 돋보기를 지속적으로 사용하면 어떻게 되나요? 누가 신경 쓰나요?

이상적으로는 웹 사이트가 충분히 유연하여 작은 줌 차이를 실제로 다르게 만들지 않지만 줌을 사용하면 이미지 품질이 저하되지만 사용자의 책임은 아닙니다.

이것은 물론 제 의견이지만 제가 일하는 회사는 고객에게 확대 / 축소 환경 설정을 지원하지 않는다고 명시 적으로 알려줍니다.

다른 사람들은 당신이 직면하게 될 문제에 대한 훌륭한 팁을 주었으며이 분야에서는 좋은 자습서를 수행하기에 충분하지 않지만 ...

사용자의 해상도 / 장치에 따라 조정되는 반응 형 사이트를 디자인 한 다음 요청한 이미지를 늘리거나 짜내는 대신 이미지를 더 높거나 낮은 해상도 파일로 전환하는 코드를 찾고있을 것입니다.

마지막 으로이 작업을 시도했을 때 media-query.js와 picturefill.js를 사용했습니다. http://responsivedesign.is/resources/images/picture-fill을 참조하십시오 . 일부 이미지가 두 개의 열에 걸쳐있는 3 열 레이아웃이 있습니다 ... 브라우저 창을 충분히 작게 만들면 큰 이미지는 한 열 너비의 작은 res 버전으로 전환됩니다. 사용자의 브라우저는 필요한 파일 버전 만로드합니다. (제 경우에는 벽돌 플러그인으로 모든 것을 수용 할 수 있습니다).

물론 사용자는 자바 스크립트를 활성화해야합니다 ...

사용자가 손을 강요 할 수 없습니다. 사용자 설정은 당신이 가지고 노는 것이 아닙니다. 사용자가 무언가를 한 이유가있을 수 있습니다. 두 경우 모두 다양한 장치에서 어떤 것도 보증 할 수 없습니다.

실제로 기술적 인 측면으로 들어가면 훨씬 더 흥미로워집니다. 당신은 정말 당신의 웹 페이지와 왕국의 열쇠를 제공합니다. 사용자가 웹 페이지를 다운로드하면 사용자는 이제 원하는대로 무엇이든 할 수 있습니다. 이 계층을 제어 할 수 없으며 사용자 시스템에서 모든 계층을 실행 한 후 원하는대로 수행 할 수 있습니다. 내 컴퓨터 / 모바일에서는 stackexhange도 컴퓨터와 동일하게 보이지 않습니다. 2 개의 렌더링 버그를 수정하고 2 개의 단축키를 추가하기 위해 GUI의 일부 측면을 자동으로 변경합니다.

HiDPI 화면에서 이미지를 업 스케일링하는 성가신 동작으로 인해 흐릿한 사진 (일명 사진 작가의 악몽)이 발생하여 꽤 오랫동안 문제가 발생했습니다. 또한 이미지에 사용하지 않도록 설정하는 간단한 CSS 속성이 없는지 궁금했습니다.

CSS를 사용하는 현재 솔루션은 다음과 같습니다.

@media only screen and (min--moz-device-pixel-ratio: 1.25),
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-device-pixel-ratio: 1.25) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.5 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
    (-o-min-device-pixel-ratio: 7/4),
    (-webkit-min-device-pixel-ratio: 1.75),
    (min-device-pixel-ratio: 1.75) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.75 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
    (-o-min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2.00),
    (min-device-pixel-ratio: 2.00) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 2.00 - var(--pic-width) + var(--pic-width));
        }
}

다음 단계는 필요한 경우 클래스를 사용하여 다른 이미지 크기를 정의하고 설정하는 것입니다. 이미지 크기를 동적으로 얻는 방법을 모르겠습니다. CSS 함수 attr ()이 작동하지 않는 것 같습니다.

따라서 이것은 프로그래밍 문제가 될 것입니다. 그러나 JQuery 또는 심지어 평면 CSS를 사용하면 사용자의 화면 너비, 화면 높이 등에 따라 다른 이미지를 표시 할 수 있습니다.

다시 말하지만 이것은 아마도 스택 교환이 아닙니다.

당신은 단순히 사이트의 머리에 HTML을 통해 이것을 할 수 있습니다

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

모든 유형의 사이트에 대해 개발자가 권장하지는 않지만 원하는 내용을 달성해야합니다.

그것이 도움이되기를 바랍니다 : CSS 규칙 변환 : 본문 태그 또는 다른 크기로 확장-여기를 참조하십시오 :

/programming/23099849/stop-firefox-dpi-scaling-when-windows-setting-is-at-125/42755741#42755741