웹 사이트에서 스마트 폰 기능을 사용하는 방법

Apple iPhone 출시 이후 모바일 장치를 통한 인터넷 사용이 증가하고 있습니다. 모바일 장치 및 해당 터치 스크린 인터페이스의 화면 크기가 다르기 때문에 웹 사이트는 컴퓨터 화면에 표시되거나 작동하는 것과 같은 방식으로 모바일 장치에 표시되거나 작동하지 않습니다. 독자층을 유지하려면 캐스 캐이 딩 스타일 시트를 사용하여 웹 사이트의 스마트 폰 버전을 만드십시오.

스마트 폰 브라우징의 한계

스마트 폰 브라우징은 두 가지 중요한 방식으로 컴퓨터 기반 브라우징과 다릅니다. 첫째, 스마트 폰의 사용 가능한 화면 크기가 컴퓨터의 화면 크기보다 훨씬 작습니다. 즉, 일부 웹 사이트가 복잡하거나 스마트 폰에서 읽을 수없는 경우가 있습니다. 스마트 폰 사용자는 컴퓨터보기에 최적화 된 웹 사이트에서 아래로 스크롤하거나 확대해야합니다. 둘째, 스마트 폰은 커서 이동 대신 터치 클릭에 응답하므로 커서 이동에 따라 변경되는 웹 사이트 요소는 스마트 폰에서 문제가 될 수 있습니다. 예를 들어, 커서를 가리키면 바뀌는 요소는 스마트 폰에서 아무 것도하지 않으므로 스마트 폰에서 원하는 방식으로 작동하지 않습니다. 또한 일부 스마트 폰 사용자의 경우 드롭 다운 메뉴가 문제가 될 수 있습니다.

CSS 상대 크기

웹 사이트에서 특정 요소의 크기를 변경하는 경우 사이트의 CSS 파일 만 변경하면됩니다. 스마트 폰의 가독성을 높이려면 CSS 크기와 글꼴 크기를 절대 단위가 아닌 상대 단위로 변경하십시오. 예를 들어 특정 요소의 폭과 높이는 픽셀 대신 백분율로 지정해야합니다. 그러면 브라우저 윈도우 또는 부모 요소의 백분율에 따라 요소의 크기가 조정됩니다. 글꼴 크기의 경우 픽셀 대신 em을 사용하십시오. 하나의 em은 현재 글꼴 크기 (픽셀)와 같습니다. 따라서 두 개의 em은 현재 글꼴 크기의 두 배입니다. 이러한 변경 사항은 별도의 CSS 파일에 저장해야합니다.

CSS 디스플레이 등록 정보

사이트에서 요소를 완전히 숨기려면 해당 요소의 CSS 스타일에 "display : none"속성을 추가하십시오. "display : none"속성은 요소를 완전히 숨겨서 윈도우의 공간을 차지하지 않습니다. 너무 많은 화면 공간을 차지하는 드롭 다운 메뉴 또는 이미지와 같은 요소에 사용하십시오. 이렇게하면 숨겨진 요소가없는 것처럼 웹 사이트의 다른 요소가 창에 정렬됩니다. 이 수정을 사용하는 경우 숨겨진 요소의 중요한 정보가 페이지의 다른 곳에 표시되는지 확인하십시오.

브라우저 리디렉션

장치가 웹 사이트에 액세스하면 먼저 HTML 문서의 섹션을 읽습니다. 문서 섹션에서 여러 CSS 스타일 시트에 연결할 수 있습니다. 모바일 장치가 웹 사이트를로드하면 브라우저는 기본 스타일 시트 대신 media = "handheld"속성으로 식별되는 스타일 시트를로드합니다. 브라우저를 화면 크기에 따라 다른 스타일 시트로 리디렉션 할 수도 있습니다. 이 기능은 다른 휴대 기기에 맞게 웹 사이트의 스타일을 지정하려는 경우 유용 할 수 있습니다. 일반적인 스마트 폰 화면 크기 목록은 참고 자료를 참조하십시오.

대체 HTML

새로운 CSS 파일 이상으로 사이트의 조직과 레이아웃을 대폭 변경하는 경우 원하는 변경 사항을 적용하여 새 HTML 파일을 만들 수 있습니다. 다른 HTML 파일을 만드는 경우 사용자가 스마트 폰에서 사이트를보고있는 경우 브라우저를 새 HTML 파일로 리디렉션해야합니다. 모바일 브라우저를 감지하는 것 외에도 대체 HTML 페이지로 리디렉션하도록 스크립트를 수정해야합니다. 모바일 브라우저를 탐지하기위한 스크립트에 대한 링크는 참고 자료를 참조한다.