분명히 텍스트 단락이 특정 길이에 도달하면 Android의 Google 크롬은 텍스트 크기를 조정하고 더 크게 만들기로 결정합니다 (모든 종류의 재미를 유발 함). 이제 저는- p태그 의 약 절반이 제가 설정 한 크기를 따르고 나머지 절반은 원하는대로 변경 하는 웹 사이트를 가지고 있습니다. 분명히 단락의 길이에 따라 다릅니다.
도대체 어떻게 고쳐야합니까?
답변:
추가 max-height: 999999px;당신이 글꼴 강화를에 방지 할 요소, 또는 그 부모.
div요소가 페이지 상단으로 어색하게 축소되었습니다. 최대 높이 정의로 사이트를 "공백"하지 마십시오! 필요한 경우에만 사용하고 철저히 테스트하십시오.
min-height: 1px가 발생하지 않았고 안타깝게도 아무런 효과가 없었습니다. max-height: 999999px그래도 트릭을 수행합니다. 내 사례는 경로 진입 / 출발 중에 매우 긴 콘텐츠 전환이었습니다. 글꼴 부스팅은 전환 중 또는 직후에 발생했지만 어느 것이인지 확실하지 않지만 매우 눈에 띄는 변화를 일으켰습니다.
<meta>문서에 다음 태그를 포함합니다 <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">
이렇게하면 뷰 프레임이 올바르게 설정되므로 "FontBoosting"이 필요하지 않습니다.
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">여전히 Chrome이 끔찍하게 확장되고 있습니다
이제이를 제어하기 위해 설정할 수있는 CSS 속성이 있습니다.
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
참조 https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust를
이것을 리셋에 넣으십시오. html * {max-height:1000000px;}
*접근 방식 을 사용해야했습니다 . 즉, 이것은 당신이 잊을 수 있고 미래에 문제를 일으킬 수있는 모호한 것들 중 하나라고 주장하고 싶습니다. 그래서 유지 보수성을 위해 아마도 그 당시에는 그것이 하나 *일지라도 남겨 두었을 것입니다 . 몇 가지 요소.
* max-height...내 코드에 LOL이 있습니다
몇 가지 테스트 후이 규칙이 도움이되었습니다. 강화 된 텍스트를 포함하는 요소 또는 div / 테이블 구조에 따라 상위 요소에 추가해야합니다.
element or parent element {
/* prevent font boosting on mobile devices */
width: 100%;
height: auto;
min-height: 1px;
max-height: 999999px;
}
필요에 따라 너비 및 높이 값을 수정해야 할 수도 있습니다.
이를 "글꼴 부스팅"이라고 하며이 WebKit 버그에 자세히 설명되어 있습니다 . 현재는 비활성화 할 수있는 방법이 없습니다.
max-height: 999999px처럼 보이지만 @moeffju가 설명한대로 설정 하여 방지 할 수 있습니다 .