Modmyi에서 본 내용을 정리해서 올려본다.
아이폰6과 6+이 나오면서 아이폰의 화면 해상도가 4개가 되어 버려서 종류에 따라 위젯의 크기 때문에 사용하기 어려운 경우가 많이 생겼다.
새로 나오는 위젯들이 대부분 6이나 6+ 용이라 내 아이폰5S에 적용하려면 일일이 CSS 파일을 수정해야 하더라.
나 같은 HTML, CSS 초보에겐 약간의 변경도 삽질이 많이 필요하여서 위젯을 적용하는 건 꽤나 귀찮은 일이었다.
그래서 버린 위젯들이 좀 됐었는데 이 팁을 알게 되면서 조금 더 간편하게 적용할 수 있게 되었다.
mone의 6+용 SBhtmlArescoNotte 위젯인데 수정 없이 그냥 적용해보면 아래처럼 아이폰6+용 해상도로 적용되어 보기 싫게 위젯이 잘려서 표현된다.
이 위젯을 아이폰5S용으로 수정하려면 위젯 폴더 안에 있는 CSS파일을 열어서
body {
margin: 0;
}
을 찾은 다음
body {
-webkit-transform: scale(0.78);
margin: 0;
position: absolute;
}
으로 변경하면 된다.
잘은 모르지만 위젯의 크기를 0.78 만큼의 크기로 표현하라는 명령인 것 같다.
수정 후 다시 적용하면
그림처럼 잘 맞춰서 표현된다.
위의 명령을 적용하면 위젯에 포함된 해상도가 큰 이미지들도 크기가 줄어서 표현되는데
단점이 무조건 크기를 줄여버리기 때문에 배경의 statusbar 부위가 조금 안 맞게 표현될 수도 있다.
그래도 이런 경우엔 이미지를 수정하면 되니까 CSS 수정보다는 쉽다. ^^;
덧붙여 위의 숫자를 조정하면 위젯을 6+에서 6으로, 또는 5S에서 6으로도 쉽게 수정할 수가 있다.
Scale이 숫자를
5/5s -> 6 = 1.17
5/5s -> 6+ = 1.29
6 -> 5/5s = 0.85
6 -> 6+ = 1.10
6+ -> 5/5s = 0.78
6+ -> 6 = 0.905
으로 변경하면 된다.
가끔 보면 CSS 파일이 없는 위젯들도 있는데 그런 경우엔 HTML에서 해당 부분을 찾아보면 된다.
이상 위젯 해상도 변경 팁 끝~
