애플 홈페이지 꼼수(?) css3 @media 테그를 알아보자

오늘 각종 sns와 언론에서 나오고 있는 이슈가 애플이 영국의 법원 판결문을 꼼수를 써서 스크롤해야지만 보여준다는 것이다. Javascript를 사용했다고 하는데...

동성님의 제보(?)로 한번 애플 홈페이지를 살짝 뜯어 보았다. 동성님 감사! 

애플 US를 제외한 타 국가의 싸이트의 CSS를 살펴보면 아래와 같은 코드들이 있다. 

그중 자세히 봐야 할 곳은 @media tag. 

이놈이 무엇인고 하니 CSS3 media query에 대하여 에 자세히 설명이 되어 있다. NHN 감사.

애플 디바이스 + PC에 대해서 모든 해상도에 대응하고 있다. 어느 발로 쓴 기사를 보니 Javascript로 꼼수를 썼다고 하는데, 개뿔. 발로 기사를 쓰는지 제대로 확인도 안하고...

사실 모든 해상도는 아니고 데스크탑 모니터에서 1200px초과하면 다 보여준다. 

법원 판결문을 제대로 보기 위해서는 레티나 맥북프로 15인치가 필요하다! 

레티나 맥북 프로를 판매하기 위한 꼼꼼함! :-) 

이 기회에 ccs 3의 @media tag를 알게 해준 애플님께 감사의 말을... 

#billboard .hero-image { *border:none; }

@media only screen and (max-height:1199px) and (min-device-width:768px), only screen and (min-device-width:320px) and (max-device-width:768px) and (orientation:landscape) {

#billboard .hero-image { border:none; background:none; }

}

#billboard .hero-image { display:block; position:absolute; z-index:2; bottom:0; right:-150px; width:768px; height:100%; _height:750px; text-align:center; }

#billboard .hero-image img { display:inline; width:auto; height:100%; min-height:475px; max-height:750px; background-size:100% 100%; -ms-interpolation-mode:bicubic; }

/* ipad / iphone / touch */

@media only screen and (min-device-width:320px) and (max-device-width:768px) and (orientation:landscape) {

#billboard { height:526px; }

#billboard .hero-title,

#billboard .videos { left:60px; }

}

/* iphone / touch */

@media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:landscape) {

#billboard .hero-title { top:30%; }

#billboard .videos { bottom:42%; }

}

/* 16:9 iphone */

@media only screen and (min-device-height:481px) and (max-device-height:568px) and (orientation:landscape) {

#billboard .hero-title { top:25%; }

#billboard .videos { bottom:46%; }

}

/* tall version

---------------------------*/

@media only screen and (min-height:1200px), only screen and (min-device-width:320px) and (max-device-width:768px) and (orientation:portrait) {

#billboard { overflow:visible; }

#billboard .hero-title { position:absolute; z-index:3; top:10px; left:50%; margin-top:0; margin-left:-220px; }

#billboard .hero-image { z-index:4; top:180px; bottom:110px; right:auto; width:100%; height:auto; }

#billboard .hero-image img { margin-left:73px; max-height:809px; border:none; background:none; }

#billboard .videos { position:absolute; z-index:3; bottom:32px; left:50%; margin-left:-490px; width:980px; }

}

/* desktop portrait */

@media only screen and (min-height:1200px) {

#billboard { max-height:1100px; }

}

/* ipad */

@media only screen and (min-device-width:481px) and (max-device-width:768px) and (orientation:portrait) {

#billboard { height:916px; }

}

/* iphone / touch */

@media only screen and (min-device-width:320px) and (max-device-width:480px) and (orientation:portrait) {

#billboard { height:820px; }

}

/* 16:9 iphone */

@media only screen and (min-device-height:481px) and (max-device-height:568px) and (orientation:portrait) {

#billboard { height:1100px; }

}