HTML5 실습 - 비반응형 디자인에서 ViewPort 메타 태그를 사용하는 방법 소개

반응형 디자인에서 viewport 태그의 중요성은 누구나 알고 있지만, 비반응형 디자인에서도 중요한 역할을 한다는 사실은 모를 수도 있습니다. 사이트가 여전히 응답하지 않는 경우 이 문서에서는 뷰포트 태그를 사용하여 모바일 장치에서 사이트 표시 효과를 향상시키는 방법을 알아봅니다.

Viewport 태그의 일반적인 사용

Viewport 메타 태그는 일반적으로 반응형 디자인에서 모바일 디바이스의 뷰포트의 너비와 초기 크기를 디자인하는 데 사용됩니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

비반응형 디자인에서 뷰포트 사용

우리 모두 알고 있듯이 iPhone의 기본 뷰포트 너비는 980px입니다. 그러나 귀하의 디자인은 이 범위를 따르지 않을 수도 있습니다. 때로는 더 넓을 수도 있고 더 좁을 수도 있습니다. 다음 두 가지 예에서는 뷰포트 태그를 사용하여 모바일 장치에서 비반응형 디자인의 표시 효과를 향상시킬 수 있는 경우를 보여줍니다.

　예

iPhone에서 Themify 사이트를 확인하세요.

스크린샷 왼쪽의 사진은 뷰포트 태그를 사용하지 않았을 때 사이트의 효과를 보여주고 있는데, 페이지가 화면 가장자리까지 도달한 것을 볼 수 있습니다. . 스크린샷 오른쪽 사진은 뷰포트 태그를 추가한 후의 효과입니다. 뷰포트 너비를 1024로 설정했습니다. 이때 페이지와 휴대폰 화면은 좌우로 일정 거리를 유지하게 됩니다. .

<meta name="viewport" content="width=1024">

　또 다른 예

너무 좁게 디자인하면 문제도 발생합니다. 디자인이 비반응형이고 컨테이너 너비가 700px이라고 가정하면 그 효과는 스크린샷 왼쪽 그림과 같을 것이며 휴대폰 화면 오른쪽에 큰 간격이 생길 것입니다.

너비가 720px인 뷰포트를 추가하면 이 문제를 해결할 수 있습니다. 디자인을 변경하지 않았지만 iPhone은 720px 너비에 맞게 조정됩니다.

<meta name="viewport" content="width=720">

일반적인 실수

일반적인 실수는 사람들이 비반응형 디자인에 대해initial-scale=1 매개변수를 설정하는 것입니다. 이런 방식으로 페이지는 100% 비율로 표시되며 비율은 조정되지 않습니다. 이로 인해 사람들은 전체 페이지를 보기 위해 페이지를 이동하거나 축소 작업을 수행해야 합니다. 최악의 시나리오는 사람들이 초기 규모=1과 함께 user-scalable=no 또는 maximum-scale=1을 사용하는 경우입니다. 이렇게 하면 사이트의 확대/축소 기능이 비활성화되어 사용자가 이런 방식으로 전체 페이지를 볼 수 없게 됩니다. 따라서 사이트가 반응형으로 설계되지 않았다면 이렇게 설정하지 마세요!

아아아아

위 내용은 HTML5 실습 - 비반응형 디자인에서 ViewPort 메타 태그를 사용하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!