모바일 단말기에서 세로화면에서 가로화면으로 전환 시 폰트가 초기화되는 문제를 해결하기 위해 뷰포트 속성을 공유합니다.

이 글에서는 모바일 단말에서 세로 화면에서 가로 화면으로 전환 시 글꼴이 재설정되는 문제를 해결하기 위해 viewport 속성을 공유합니다. 처음 작업을 시작했을 때 휴대폰으로 페이지를 테스트한 적이 없었습니다. 그 결과 여러 페이지를 쓰고 나니 페이지가 매우 작고 거의 보이지 않는 것을 발견했습니다.

이유는 각 모바일 기기마다 고유한 기본 표시 영역 너비가 있기 때문입니다.

뷰포트: 모바일 브라우저에는 표시 뷰포트(기기 화면 크기)와 브라우저 뷰포트(웹페이지 너비)라는 두 가지 뷰포트가 있습니다.

아이폰 4S를 예로 들자면 화면은 320*480이지만 너비가 980픽셀(아이폰의 경우 기본값은 980)인 콘텐츠를 표시할 수 있으므로 모바일에서 웹페이지를 올릴 때 측면에서 표시하면 Shrunk by 980/320과 같습니다. 휴대폰에서 이렇게 하는 목적은 더 많은 것을 표시하기 위한 것이지만, 결과적으로 PC에서 만든 페이지는 모바일 단말기의 개미만큼 작습니다!

모바일 버전에는 viewport라는 메타 태그가 있습니다. 이 태그를 사용하여 브라우저 뷰포트 너비를 표시되는 뷰포트 너비와 동일하게 설정할 수 있습니다.

<meta name="viewport" content="width=device-width">

뷰포트를 지원하지 않는 일부 오래된 모바일 장치 브라우저(음, BlackBerry 등)의 경우 다음 코드를 사용할 수 있습니다.

<meta name="HandheldFriendly" content="true">

하지만 현재는 이를 사용하는 사람이 많지 않은 것 같습니다. 이를 위해 일반적으로 첫 번째 줄을 작성합니다.

뷰포트에 관해 말하면 그는 실제로 다른 속성을 가지고 있습니다.

:

initial-scale: 초기 크기 조정 비율

maximum-scale: 크기 조정이 허용됩니다. 최대 scale

minimum-scale: 확장에 허용되는 최소 규모

user-scalable: 수동 확장 허용 여부

이 속성은 무엇에 사용되나요?

모바일 기기를 세로에서 가로로 전환하면 글꼴이 재설정되어 매우 커지는 현상을 해결하는 방법은 무엇인가요?

이렇게만 설정하시면 됩니다

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1>

페이지를 이렇게 설정하세요. 기본 확대/축소 비율은 1이고, 허용되는 확대/축소도 1-1로 동일합니다. 확대/축소를 비활성화하면 브라우저는 글꼴 크기 렌더링에 따라서만 정의합니다.

이렇게 쓰는 모습을 보실 수도 있습니다.

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" >

그러나 실제로 user-scalable=no 속성을 사용할 때 스케일링을 비활성화했기 때문에 maximum-scale=1, maximum-scale=1은 무시되었습니다.

다른 곳에서 좀 더 구체적인 설명을 찾았습니다.

1) user-scalable=no가 페이지 크기를 조정할 수 없다는 보장이 있나요? 아니요, 일부 브라우저는 이것을 좋아하지 않습니다. 또 다른 트릭은 maximum-scale=1.0, maximum-scale=1.0입니다. 최대 및 최소 크기 조정 비율을 1.0으로 설정하면 됩니다.

2),initial-scale=1.0 초기 스케일링은 사용자가 스케일링할 수 있나요? 반드시 그런 것은 아닙니다. 일부 브라우저는 user-scalable을 사용자가 수동으로 크기 조정하는 것으로 해석합니다. user-scalable=no인 경우 초기 크기 조정이 적용되지 않습니다.

3) 모바일 페이지는 터치로 이동할 수 있지만, 이 작업을 금지해야 하는 경우 페이지 너비가 화면 너비와 동일하고 페이지가 화면에 정확히 맞는지 확인합니다. 이동할 수 없습니다.

4) 화면 너비에 맞게 페이지를 축소하면 텍스트 상자가 활성화(포커스됨)되면 문제가 발생합니다.

따라서 안전을 위해 두 번째 방법을 사용하는 것을 권장합니다.

물론, 사용자의 확대/축소가 금지된다는 단점이 있습니다. 관심 있는 분들은 살펴보셔도 되지만 여기서는 설명하지 않겠습니다.

약간의 여담:

CSS3에는 -webkit-text-size-adjust 속성이 있습니다.

이 속성은 글꼴 크기 조정도 비활성화합니다. 이 속성의 장점은 프로젝트 요구 사항에 따라 범위를 사용자 정의하고 설정할 수 있다는 것입니다.

이 속성의 기능은 페이지 확대/축소를 제어하는 ​​것이 아니라 Webkit 커널 브라우저의 텍스트 크기 조정 기능을 비활성화하는 것입니다. 중국어 버전 Chrome 브라우저의 최소 글꼴 제한은 12px입니다.

그런데 이 속성의 남용으로 인해 몇 년 전부터 데스크탑 브라우저에서는 더 이상 지원하지 않아서 실제로 사용해본 적은 없고 다른 자료에서만 봤었습니다.

【관련 추천】

1. 특별 추천: "php Programmer Toolbox" V0.1 버전 다운로드

2. 뷰포트 호환성 문제에 대한 예제 코드

3. 뷰포트 특별 주제: CSS-viewport의 반응형 웹 디자인에 대한 심층적 이해

4. HTML5의 Viewport 매개변수 소개 및 사용방법

위 내용은 모바일 단말기에서 세로화면에서 가로화면으로 전환 시 폰트가 초기화되는 문제를 해결하기 위해 뷰포트 속성을 공유합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!