Responsive Design의 서버 측은 무엇을 포함합니까?

Question

반응 형 CSS 디자인을 사용하여 사이트를 개발할 때 사이트는 클라이언트의 화면 크기에 따라 정보가 표시되는 방식을 변경합니다. 대부분의 경우 화면 크기가 작 으면 정보가 더 적게 표시됩니다.

데스크톱 용으로 설계된 사이트가 있다고 가정 해 보겠습니다. 서버 측 코드에서 몇 가지 데이터베이스 쿼리를 만든 다음 페이지에 정보를 표시합니다.

이제 CSS 디자인이 반응적이고 일부 정보는 작은 화면이있는 장치에는 표시되지 않습니다. 해당 정보 중 일부는 데이터베이스 쿼리에서 표시되지 않는다고 가정 해 보겠습니다. 즉, 모바일 장치가이 페이지를로드 할 때 화면 크기로 인해 결과 정보가 최종 사용자에게 표시되지 않으므로 서버 쪽 코드가 불필요한 데이터베이스 호출을하고 있습니다.

반응 형 디자인은 일반적으로 CSS 미디어 쿼리를 사용하여 장치 화면 크기에 따라 표시되는 정보를 결정합니다. 반응 형 디자인을위한 효과적이고 효율적인 서버 측 코드를 작성하는 좋은 방법은 무엇입니까?

Answer 1

AJAX를 사용하여 화면 크기에 대한 패스 데이터를 다시 서버 측 PHP로 전달 했습니까? 그런 다음 해당 CSS 디자인을 기반으로 쿼리를 실행하십시오. 자바 스크립트를 지원하지 않는 휴대 기기 나 브라우저를 사용 중지하는 브라우저가있는 경우 문제가 발생합니다. 또한 추가 유지 관리가 필요합니다. CSS를 표시하도록 CSS를 변경하면 스크립트를 동기화하여 업데이트해야합니다.

일반적으로 CSS 미디어 쿼리는 다양한 크기의 콘텐츠 표시를 최적화하는 데 사용되지만 콘텐츠의 "손실"은 무시됩니다. 이는 추가 쿼리/계산/내용이로드되었지만 숨겨 짐을 의미 할 수 있습니다. 이것의 최대 단점은 사용자가 축소 된 브라우저에서 작동하고 최대화하면 전체 페이지를 새로 표시한다는 것입니다. 콘텐츠가 충분하지 않은 경우 페이지를 새로 고침하지 않으면 콘텐츠를 최대한 활용할 수 없습니다.

당신이 스스로 생각해 볼 필요가 있다고 생각합니다 - 추가 빌드 및 유지 관리 노력이 백엔드에서 일부 쿼리를 저장할 가치가 있습니까?

Answer 2

@ jakobud 모바일 및/또는 반응 형 디자인의 컨텍스트에서 클라이언트 측 및 서버 측 기능 검색을 결합하는 방법을 설명하는 다음 문서 및 프레젠테이션을 살펴볼 수 있습니다. 나는이 모든 것을 걸었습니다 경우 : 난 당신이 내가 가진 동일한 문제를 가지고 생각하는

Adaptation: why responsive design actually begins on the server

Pragmatic responsive design

Detector: Combining browser and feature detection in your web app

Answer 3

나는, 응답 디자인의 내 탐사 초기에 질문을 발견 사용자가 가지고있는 장치에 프론트 엔드를 적용하려는 노력은 처음부터 적절한 자료를 제공하는 데 많은 노력을 기울여야합니까?

그러나 Responsive Design 동작을 이해하면 (적절하다고 판단되면?) 모든 장치 크기를 현명하게 조정하고 표시 방법을 재조정하여 기본 웹 페이지를 제공하는 것이 좋습니다.

귀하의 웹 리소스가 PC 나 노트북에서 풀 버전으로 제공되는 일부 상호 작용이나 정보가 전혀 비현실적이거나 부적절한 것이라면 사이트의 모바일 버전을 구축해야합니다. 스마트 폰 앱. 이 시점에서 브라우저를 감지하고 www.example.com에서 mobile.example.com으로 리디렉션 할 수있는 무언가를 서버 측에서 수행 할 수 있습니다.