최근 친구가 X 테마를 사용하여 구축한 WordPress 사이트에 대한 도움을 요청하기 위해 저에게 연락했습니다. 그의 고객은 그날 아침 그의 웹사이트가 그의 iPhone에서 제대로 표시되지 않는 것을 보고 그에게 전화를 걸었습니다. Nick이 직접 확인해 보니 그가 디자인한 아름다운 반응형 디자인이 더 이상 작동하지 않았습니다.
데스크톱에서 브라우저 창의 크기를 조정하면 사이트가 반응하지만 iPhone에서는 데스크톱 버전만 표시된다는 사실에 더욱 당황했습니다. 사이트가 데스크탑 컴퓨터에서는 반응하고 모바일 장치에서는 반응하지 않는 이유는 무엇입니까?
반응형 디자인이 작동하지 않는 이유
HTML 파일의 헤더에서 코드 한 줄이 누락되면 반응형 디자인이 작동을 멈춥니다. 이 한 줄의 코드가 누락된 경우 iPhone, Android 및 기타 모바일 장치는 보고 있는 웹사이트를 전체 크기 데스크톱 사이트로 가정하고 viewport의 크기를 조정합니다.전체 화면을 포함합니다.
뷰포트 및 뷰포트 크기란 무엇을 의미합니까?
모든 기기에서 뷰포트의 크기는 현재 사용자에게 보이는 웹페이지 영역의 크기를 의미합니다. 너비가 320픽셀인 iPhone 5를 들고 있다고 상상해 보십시오. 별도로 명시하지 않는 한, iPhone은 방문하는 모든 웹사이트를 너비가 980px인 데스크톱 사이트로 가정합니다.
이제 가상의 iPhone 5를 사용하여 너비가 800px인 데스크톱용 웹사이트를 방문합니다. 반응형 레이아웃이 아니므로 iPhone에서 전체 너비 데스크톱 버전을 표시합니다.
아니오, 그렇지 않습니다. 뷰포트 크기를 사용하면 크기 조정이 포함될 수 있습니다. 웹 페이지의 전체 너비 버전을 보려면 iPhone을 축소해야 합니다. 뷰포트는 현재 사용자에게 표시되는 페이지 영역을 나타냅니다. iPhone 사용자에게 현재 페이지의 320픽셀만 표시됩니까, 아니면 전체 너비 버전이 표시됩니까?
맞습니다. iPhone이 기본 동작을 가정했기 때문에 디스플레이에 전체 너비 웹 페이지가 표시됩니다. 축소되어 사용자가 최대 980픽셀 너비의 웹 페이지를 볼 수 있습니다. 따라서 iPhone의 뷰포트는 980px입니다.
확대하거나 축소하면 뷰포트 크기가 변경됩니다. 가상 웹 사이트의 너비는 800px이므로 웹 사이트의 가장자리가 iPhone 디스플레이의 가장자리에 닿도록 iPhone을 확대하면 뷰포트는 800px가 됩니다. iPhone은 데스크탑 사이트에서 320px의 뷰포트를 가질 수 있지만, 만약 그렇다면 여러분은 그 중 일부만 볼 수 있을 것입니다.
내 반응형 웹사이트가 깨졌습니다. 어떻게 고칠 수 있나요?
대답은 웹 페이지의 헤더에 삽입될 때 장치에 뷰포트를 자체 너비(iPhone 5의 경우 320px)로 설정하고 비율을 조정하지 않도록 지시하는 한 줄의 HTML입니다. (또는 줌) 페이지.
이 메타 태그와 관련된 모든 옵션에 대한 보다 기술적인 논의는 tutsplus.com에서 이 기사를 확인하십시오.
WordPress X 테마가 응답하지 않을 때 수정하는 방법
이전 친구에게 돌아가기: X 테마를 업데이트하면서 이 한 줄의 코드가 사라졌습니다. 문제를 고칠 때 X 테마는 하나의 헤더 파일만 사용하는 것이 아니라 스택마다 다른 헤더 파일을 사용하므로 자신의 헤더 파일을 수정해야 합니다.
닉은 X 테마의 Ethos 스택을 사용하기 때문에 x /frameworks/views/ethos/wp-header에 있는 헤더 파일에 이전에 언급한 코드 줄을 추가해야 했습니다..php . 다른 스택을 사용하는 경우 스택 이름(Integrity, Renew 등)을 'ethos'로 대체하여 올바른 헤더 파일을 찾습니다. 한 줄만 입력하면 짜잔! 가셔도 좋습니다.
그래서 이것은 내 CSS 미디어 쿼리도 수정합니까?
HTML 파일의 헤더에 해당 줄을 삽입하면 반응형 @media 쿼리가 갑자기 다시 작동하기 시작하고 웹사이트의 모바일 버전이 다시 살아납니다. 읽어주셔서 감사하고 도움이 되었으면 합니다!
Payette Forward 기억, David P.
