웹 응용 프로그램 배경에 대한 장치 종속 배율/확대 픽셀 동작 png

Question

phonegap의 하이브리드 응용 프로그램에서 특정 장치를 테스트 할 때 문제가 있습니다.

모든 .png 이미지에서 발생합니다. 설명이 목적이므로 650px x 650px가 설명됩니다.

이미지가 기본 해상도보다 훨씬 작은 크기로 배경 이미지로로드됩니다.

• 사용자는 이미지를 선택하고 제스처를 확대/축소하여 CSS를 확대 할 수 있습니다.
• 이것은 훌륭한 기기로 작동하며 다양한 기기에서 테스트했을 때 은 정상입니다. 이미지가 확대되고 선명도는 입니다. orrigional 작은 표현 가 scalled 그래서 최대 크기의 세부 손실이 있다면, 사용자가 이미지의 확대는 특정 장치에서
• 날카로운 가장자리 톱니와 흐려지고 로서 낟알 ...하면 앱이 화면을 변경하므로 현재 디스플레이를 만들지 않으므로 아무 것도 표시되지 않고 다시 변경됩니다. 이미지는 다른 모든 장치와 마찬가지로 영광스러운 해상도 인 입니다.

그래서 우리는 하나의 장치에 장애가 발생하지만 같은 동작을 exibit 할 다른 장치가 얼마나 있는지 알 수 없습니다.

GPU 렌더링, 이미지 해상도 CSS 설정, 이미지를 최대 크기로로드하고 크기를 줄이려고했지만 아무 것도 효과가 없었습니다.

이미지를 다시로드하거나 화면 변경을 시뮬레이트하지 않으려합니다. 이렇게하면 필요하지 않은 다른 장치에 부하가 발생합니다.

누구나 수정하거나 예방하는 방법을 알고 있습니까? 변경하거나 감지 할 수있는 기기 설정으로 인해 어떤 문제가 발생할 수 있습니까? 이 경험이있는 사람이 있습니까?

Answer 1

해결책을 찾았습니다.

나는 여러 가지 일을 시도했지만 작동하지 않았습니다. 많은 것들이 생략되었고 그 차이점이 해결책으로 이어지게 만들었습니다.

배경 이미지를 자체로 재설정 중입니다.

style = ele.currentStyle || window.getComputedStyle(ele, false); 
bg = style.backgroundImage;  // get bg image URL 
ele.style.backgroundImage=bg; // reasign bg image URL 

아무 것도하지 않았습니다.

그래서 스타일 시트를 다른 이름의 동일한 이미지로 바꾸어 보았습니다.

그런 다음 디스플레이를 "none"으로 설정하고 "block"으로 되돌립니다. 불행히도 이러한 액티비티 사이에 시간 제한을 두지 않으면 앱이 다시 그리기를 방해하지 않습니다.

그래서

는

ele.style.display = "none"; 
ele.display = "block"; 

작동하지 않았다.내가 만세, 그것은 일 4 MS에 대기가 증가 할 때

는

ele.style.display = "none"; 
setTimeout(function() {ele.display = "block";}, 0); 

하지 않았다 나도! 화면에 4ms가 넘는 빈 기간이 있습니다.

그래서 시각적 인 효과가 없으면 다시 그리기가 일어날 것이라고 생각했습니다. 픽셀 떨림이나 경계에는 사소한 영향을주는 많은 것들이 있습니다. 배경색 변경을 테스트하려고했는데, 배경색이 이미지이고 인라인 블록 및 블록에 내 앱에 대한 시각적 효과가 없으므로 눈치 채면 안됩니다. 항상 그것없이 작동하지 않았기 때문에

ele.style.display = "inline-block"; 
setTimeout(function() {ele.display = "block";}, 10); 

나는 다시 타이머를 넣어. 타격, 맑은 이미지 및 기타 시각 장애 또는 응답 성 손실 없음. 그림 저하를 나타내지 않는 장치에서는 성능 저하가 없습니다.