Wordpress 사이트 모바일 버전 만들기

Question

우리는 데스크톱 용으로 개발 된 웹 사이트를 운영하고 있습니다. 이제 모바일 버전을 만드는 작업에 축복을 받았습니다. 모바일 디자인은 데스크톱 버전과 상당히 다를 수 있으며 웹 사이트는 Wordpress를 기반으로합니다. 전용 (가능한 한)

1. 내가 CSS 변경에 충실하며 작은 화면을 대상으로 미디어 쿼리를 사용 : 지금은 가장 좋은 방법 일 것입니다 무슨 확실하지 않다? 큰 이미지가 표시되는 경우에도 여전히 다운로드되는 것에 대해 걱정됩니다. 모든 JS에서 꽤 많은 JS가 일어나고 있으며이 JS는 사이트의 모바일 버전에 사용되지 않을 것이므로 추가적인 수표 등을 만들어야 할 것입니다.이 접근법에 대한 다른 가능한 문제는 무엇입니까?

2. 서버 측 코드는 모바일 브라우저가 사용자 정의 html을 반환해야하는지 감지해야합니까? 이 접근법에 대한 다른 가능한 문제는 무엇입니까?

3. 위의 두 가지의 혼합?

4. 다른 옵션은 무엇입니까?

만약 사람이 비슷한 프로젝트 경험을 가지고 있으며, 솔루션은 그 중대 할 것 proffered 어떤 날 지점 수 있습니다.

Answer 1

를 사용하여 미디어 쿼리. JS의 경우 js가 실행되거나 중지되도록 트리거하는 작은 중단 점 처리기를 직접 만듭니다.

많은 사람들이 압축 된 2x 이미지가 압축 된 1x 이미지보다 작다고 생각하지 않습니다. 따라서 이미지 압축을 사용하면 큰 이미지 만 사용하면 더 나은 네트워크 성능을 얻을 수 있습니다. 그 이미지의 얼마가 표시되는지는 부정적인 성능을 유발할 수있는 잠재적 인 문제이지만, 나는 그것이 중요하지 않다고 생각한다.

모바일 용 UI가 데스크톱이 아닌 완전히 다른 UI를 사용하고 있습니까? 아니면 요소의 위치가 다릅니 까? 두 개의 템플릿을 지원해야하는 경우 Adaptive Server (서버에서 응답)에 대해 생각해보십시오. 여기서 서버는 UserAgent를 기반으로 클라이언트에 보낼 템플릿을 결정합니다. UserAgent는 클라이언트가 가지고있는 브라우저 유형을 제외하고는 많은 것을 얻지 못할 것입니다. 장치 화면의 크기를 파악하려면 치수를 알아야하거나 WURFL과 같은 서비스를 사용해야합니다.

미디어 쿼리를 사용하여 하나의 템플릿에서 모든 UI 변경을 수행 할 수 있다면 모바일 우선 접근 방식에서 작업을 시작하고 기본적으로 사이트의 모바일 모양에 대해 처음부터 시작한 다음 알아내는 것이 가장 좋습니다 가능한 한 현재 데스크톱 모양에 최대한 일치하도록 페이지의 요소를 다시 배치하는 방법 반응 형 대 적응 형 접근법을 사용하면 UserAgent 탐지가 필요 없으며 장치의 너비에만 사용할 수 있습니다.

"모바일"대 "데스크톱"의 반응은 실제로 제한적이며 약간의 혼란을 야기합니다. 모바일은 위치를 변경하는 기기를 참조해야합니다. 반응 형 페이지의 레이아웃 (중단 점)을 설명하기 위해 작은, 중간 및 큰 이름을 사용해보십시오.

마지막으로 "반응 형"을 선호하는 방법은 없습니다... "각 사이트가 충족 될 필요가 자신의 요구 사항입니다 것입니다 그것은 가능한 한 많이 배우고 당신의 필요에 따라 선호하는 방법을 만들기 위해 당신에게 달려

Answer 2

나는 Responsive Theme Wordpress의 큰 팬이다. 매우 맞춤 설정이 가능하며 모바일 및 데스크톱 모두에서 하나의 사이트를 사용할 수 있습니다. 레이아웃 변경 가능한만큼

https://wordpress.org/themes/responsive

Answer 3

을 항상 사용할 수 있습니다

<meta name = "viewport" content = "width = device-width"> 

헤더에. 그런 다음 전체 사이트는 모바일 장치에 맞게 크기를 조정합니다.

귀하의 모든 JS 여전히 모바일 기기에서 작동해야합니다. 그것은 단지 '플래시'가 될 것이라고 것 없습니다.

사이트의 ISN ' "반응하는"것이지만, 사이트에 따라 그리고 얼마만큼의 intera 방문자 등이 필요합니다. 때로는 적절하고 간단합니까?