글꼴 크기 증가

I 모바일 장치를위한 웹 사이트를 최적화하는 중이 야, 나는 거의 끝났어요 (야호!)하지만 한 가지 내 뇌 랙한다 : 작동 원리글꼴 크기 증가

을

나는 CSS를 사용하여 탭 - 바 (실제로는 목록)를 드롭 다운 메뉴처럼 사용할 수 있습니다. 보이는 유일한 목록 요소를 만질 때, jQuery는 ul 요소에서 "open"클래스를 토글하고 모든 목록 요소도 나타납니다. 그것이 작동하는 방법입니다.

문제점

드롭 다운 메뉴를 전개하는 경우는 15 픽셀로부터 19px에 폰트 크기의 증가이다. 그리고 감찰관에는 이것이 일어나는 이유에 대한 절대적인 힌트가 전혀 없습니다. font-size: 15px !important;과 같은 규칙을 추가해도 아무런 효과가 없습니다. http://youtu.be/MUTJfTK70PE?hd=1

영향을받는 장치

안드로이드 (삼성 갤럭시)
아이폰 OS (아이팟, 아이폰, 시뮬레이터)

윈도우 :

은 내가 당신을 위해 작은 스크린 캐스트를 만들어 전화 (인터넷 익스플로러)는 (와우 !)

나는 모든 단일 아이디어에 대해 매우 감사 할 것입니다!

출처

2014-01-17 Robert

재미있는 점 : 글꼴 크기는 가로보기에서만 증가합니다. – Robert

그것은 모바일 Webkits 글꼴 크기 조정 원점이라고 밝혀졌다. 이 가장 명시 적으로 페이지 헤더의 뷰포트를 설정하여 해결 HTML5에서

-webkit-text-size-adjust: none;

출처

2014-02-17 16:43:50 Robert

이 같은 무언가를 추가하려고 할 수 있습니다 : font-size: 1.5rem;

출처

2014-01-17 09:51:56 user3096206

그것은 효과가 없습니다, 단지 목록 요소의 높이를 줄입니다 : ( – Robert

마지막 시도 하나, rem 대신 사용자 em. 비슷한 nav 및 작동을 사용하고 있습니다 :/ – user3096206

운이 좋네요. 사용 하시나요? 또한 모바일 페이지에서? 데스크탑 브라우저에서 nav는 정상적으로 작동합니다. – Robert

: 이 규칙은 그것을 해결. 성명서

<meta name="viewport" content="width=device-width, initial-scale=1.0">

는 모바일 글꼴 크기를 줄입니다. text-size-adjust를 none으로 설정하면 휴대 기기의 확대/축소가 비활성화되는 단점이 있지만 여전히 무거운 접두사가 필요하며 일부 브라우저에서는 none 값을 무시한 것처럼 보입니다.

출처

2016-09-03 11:43:22

글꼴 크기 증가

답변

관련 문제