사파리 탐색 모음

디렉토리

뇌관

최근 아이폰의 사파리에서 H5 페이지를보고, 일부 플랫폼 페이지, 자동 숨기기, 전체 페이지 더 많은 공간, 더 많은 정보와 같은 효과를 볼 수있는 것이다 탐색 모음의 주소 상단 바 하단을 아래로 스크롤 발견했을 때 현재의 비즈니스 시나리오에 더 적합. 시계는 어떻게 시도를 요약하면, 어떤 정보를 찾기 위해, 전에 이런 짓을.

숨기기 사파리 탐색 모음

너무 많은 콘텐츠 페이지가 아래로 스크롤 할 때 탐색 모음 및 주소 표시 줄이 현상은 사파리의 정상적인 기능입니다 버리고, 이하 기본적으로 숨겨져 있습니다 . 이것은 순수한 디스플레이입니다 페이지에서 다음과 같이 모바일 터미널 접속은 다음과 같습니다

(61) - 순수 - 페이지

기본적으로 숨겨진

정보의 페이지를 찾고 다른 플랫폼에 비해함으로써, 사고의 주요 방향은 페이지 구조 및 CSS 스타일이다.

첫째는 종종 프로젝트에서 스타일 라이브러리를 소개 다시 생각했다 normalize.css ,이 결과에 영향을 미칠 것입니다 여부를 살펴. 이것은 인 테스트 페이지 다음, 이동 단말기는 액세스 :

61 페이지 평준화

시험 결과는 : 영향을주지 않습니다 .

그런 다음 비교 페이지 구조는, 우리는 다음과 같은 상황을 발견했다 :

  • 기본적 무효으로 숨겨져 스크롤이 아닌 용기 본체 요소입니다. 이것은 페이지의 일례 , 상기 이동 가입자 단말기는 다음과 같다 :

61 노 본체 없다

  • 스타일을 설정 용기 본체 요소, HTML로 스크롤 overflow: hidden기본 무효으로 숨겨져. 이것은 페이지의 일례 , 상기 이동 가입자 단말기는 다음과 같다 :

61 노 본체 없다

  • 스크롤 용기 본체 요소, HTML 기본 스타일에 효과적으로 기본적으로 숨겨져 있습니다. 이것은 페이지의 일례 , 상기 이동 가입자 단말기는 다음과 같다 :

61 노 본체 없다

숨겨진 된

그것은 다음과 같은 단계가 필요합니다 :

  1. 태그 추가 <meta name="apple-mobile-web-app-capable" content="yes" />가 전체 화면 모드에서 디스플레이 응용을 가능하게 의미, 자세히 확인할 메타 태그를 지원 .
  2. 사용 아이폰의 사파리 페이지를 열고 사용하는 '홈 화면에 추가합니다. "
  3. 위로 메인 화면에 입력하기 위해 해당 아이콘을 클릭합니다.

이것은 페이지의 일례 , 상기 이동 가입자 단말기는 다음과 같다 :

(61) - 전체 화면

이것은 여러 단계의 작업을 소유하는 사용자가 필요합니다, 촉진하기 어렵다. 발견되지 탐색 모음 H5 예제 페이지를 숨길 수있다.

사파리 네비게이션 바 표시

위의 시도에서 탐색 모음의 경우에 표시되어 있습니다 :

  1. 스크롤이 아닌 용기 본체 요소입니다.
  2. 용기 본체 요소에 스크롤, HTML은 스타일을 설정합니다 overflow: hidden.

아이폰 회계 시스템

시간이지나면서 많은 온라인, 일부는 회계 시스템은 아래에 볼 수있는 특정 시스템에없는 일입니다 않습니다

참고 자료

추천

출처www.cnblogs.com/thyshare/p/12228864.html