반응 형 디자인 + RESS 기법

Question

if/else PHP 또는 Javascript에서 이와 비슷한 것을 쉽게 수행 할 수 있는지 궁금합니다. 나는 일반적인 ress 기술에 대해 읽었으며 WURFL과 같은 장치 탐지에 의존하지 않는 솔루션을 찾으려고 노력하고 있습니다. 아마도 내가 찾고있는 것은 "조건부 로딩"이라고 할 수 있을까요?

목표는 미디어 쿼리와 똑같은 화면 너비를 기준으로 적절한 마크 업을로드하는 것입니다. 예를 들어, 더 큰 화면의 경우 전체 탐색을 만들 수 있고 더 작은 장치/화면의 경우보다 간편한 모바일 친화적 인 탐색을 만들 수 있습니다. 이렇게하면 많은 대역폭을 절약하고 사이트를 진정으로 유연하게 만들 수 있습니다. 귀하의 의견을 보내 주셔서 감사합니다!

{ if < 768 } 
some code here {html, php, etc} 
{/if} 
{ if > 768 } 
some code here {html, php, etc} 
{/if} 

Answer 1

당신은 장치의 폭과 window.screen.width에 대한 element.clientWidth를 사용할 수 있습니다. 또 다른 방법은 모든 브라우저에서 사용할 수있는 window.matchMedia입니다.

Answer 2

이러한 디자인을 만들 수있는 몇 가지 방법이 있습니다. Javascript와 PHP는 둘 다 사용할 수 있지만 그들의 견해를 가질 것입니다.

PHP를 제외시키기 위해 사용자 에이전트 테스트를하고 싶지 않다고 말했습니까? 당신은 $_SERVER['HTTP_USER_AGENT']을 수행하고 IPhone 등을 테스트하여 php를 사용하여 사용자 에이전트를 점검 할 수 있습니다. 원하는 경우 조건문 내에서 원하는 내용을 표시 할 수 있습니다.

자바 스크립트는 웹 브라우저에 의해 점유 할 수있는 브라우저에 사용 가능한 높이를 반환합니다

window.screen.availWidth AND window.availHeight

이를 사용하여 화면 크기를 테스트하는 데 사용할 수 있습니다. 전체 해상도로 사용하려면 window.screen.width AND window.screen.height

이 방법은 대부분의 브라우저에서 사용할 수 있지만 한 가지 문제가 있습니다. 픽셀 깊이 비율에 따라 실제 화면 해상도를 반환하지 못할 수도 있습니다. 예를 들어 망막 스크린이있는 Mac을 사용합니다. 위에 나열된 자바 스크립트는 실제로 화면 크기와 높이가 1280x800 인 것을 보여줍니다. 실제로는 2560x1600 또는 2x 반환 값입니다. 망막 스크린이있는 사과 제품을 테스트하고 2로 곱하면이 문제를 해결할 수 있습니다. 그러나 픽셀 깊이가 웹 사이트의 객체 비율에 영향을 미치지는 않는다면 단지 뚜렷하지 않은 이미지와 비디오가 흐릿하게 보이거나 픽셀 화 된 것처럼 보일뿐입니다.

희망이 도움이됩니다.