휴대폰 개발 필수 스킬 : javascript 및 CSS 함수코드 공유_javascript 스킬

1. 뷰포트:

눈에 보이는 영역입니다. 데스크톱 브라우저의 경우 모든 도구 모음, 상태 표시줄, 스크롤 막대 등을 제거한 후 웹페이지를 보는 데 사용되는 영역인 뷰포트가 무엇인지 모두 알고 있습니다.
이것이 실제로 작동하는 영역입니다. 모바일 기기의 화면 너비는 기존 웹의 화면 너비와 다르기 때문에 뷰포트를 변경해야 합니다.

실제로 우리가 작동할 수 있는 속성은 4가지입니다.

코드 복사 코드는 다음과 같습니다.

width - // 뷰포트 너비(범위 200~10,000, 기본값 980픽셀)
height - // 뷰포트 높이(범위: 223~10,000)

initial-scale - // 초기 스케일링(범위: >0 ~ 10)

maximum-scale - // 사용자가 확대/축소할 수 있는 최소 규모
maximum-scale - // 사용자가 확대/축소할 수 있는 최대 비율

user-scalable - // 사용자가 수동으로 축소할 수 있는지 여부(아니요, 예)

그렇다면 이러한 설정이 Safari에 정확히 어떻게 알려줍니까? 실제로는 매우 간단하며 다음과 같은 형식의 메타입니다.

코드 복사 코드는 다음과 같습니다.

//인코딩

// 오프라인 애플리케이션을 위한 또 다른 트릭
// 상태 표시줄 숨기기 //지정된 iPhone   의 사파리 상단 상태 표시줄 스타일
//페이지에 있는 숫자를 전화번호로 무시하도록 기기에 지시합니다.


initial-scale=1로 설정한 후 마침내 1:1 비율로 페이지를 디자인할 수 있습니다. 뷰포트와 관련하여 또 다른 매우 중요한 개념은 iPhone의 Safari 브라우저에는 스크롤 막대가 전혀 없으며 단순한 "스크롤 막대 숨기기"가 아니며 이 기능이 전혀 없다는 것입니다. iPhone의 Safari 브라우저는 실제로 처음부터 웹페이지 전체를 표시한 다음 뷰포트를 사용하여 일부를 봅니다. 손가락으로 드래그하면 실제로는 페이지가 아니라 뷰포트를 드래그하는 것입니다. 브라우저 동작의 변화는 스크롤 막대에만 국한되지 않으며 상호 작용 이벤트도 일반 데스크톱의 동작과 다릅니다.

2.링크:

코드 복사 코드는 다음과 같습니다.

// 시작 페이지 이미지 설정

// 북마크 설정 시 아름다운 아이콘을 표시할 수 있습니다
// 세로 모드 스타일

//세로 화면에 사용되는 스타일