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