모바일 해상도별 디자인 사이즈 유의사항 ( 탑버튼 찌그러짐 수정 )

비공개) 모바일 해상도별 디자인 사이즈 유의사항 ( 탑버튼 찌그러짐 수정 ) 

720 디자인에서 85*85 사이즈의 탑버튼을 적용하였는데

( 뷰포트 720으로 모바일 웹 제작 ) 탑버튼이 자꾸 찌그러진다하여 

모바일 기기 점유율 ( 해상도 점유율 )    --> http://gs.statcounter.com/screen-resolution-stats/mobile/south-korea/#monthly-201706-201802-bar

확인해보니

360이 제일 많았고 그에대한 계산법으로

720:360 = 85:x  인데

그럼 x가 42.5로 딱 떨어지지 않게 나와서

84로 계산하니 42로 딱 떨어짐.

그다음 제일 점유율이 많은 해상도 412와 비교해본 결과 84가 0점에 제일 가까웠음.

원래 85*85 디자인을 84*84로 다시 요청하여 적용하니 

아이폰x / 갤럭시s8 / 갤럭시s7 / 갤럭시 s6  - 잘나옴. 

아이폰 5s : 살짝 일그러짐.

모든 디바이스를 맞출수 없음을 설명 ( 해상도가 각기 다르기에, 현재 720뷰포트를 사용함으로 인한 )

------------------------------------------------------------

탑버튼,필터버튼 가로사이즈84px로 적용

테스트 확인 디바이스 : 아이폰x / 갤럭시s8 / 갤럭시s7 / 갤럭시 s6

720:360 = 85:x       42.5

720:360 = x:41 82

720:360 = x:42 84*

720:360 = x:43 86

720:360 = x:44 88

720:360 = x:45 90

720:360 = x:46 92

720:412 = 82:x 46.92222222222222

720:412 = 84:x 48.06666666666667

720:412 = 86:x 49.21111111111111

720:412 = 88:x 50.35555555555556

720:412 = 90:x 51.5

720:412 = 92:x 52.64444444444444

720:412 = 94:x 53.78888888888889

720:375 = 84:x 43.75

720:320 = 84:x 37.33333333333333

------------------------------------------------------------