iPhone 방향이 세로에서 가로로 변경될 때 HTML 글꼴 크기 유지

iPhone 방향이 세로에서 가로로 변경될 때 HTML 글꼴 크기 유지

각각의 내부에 하이퍼링크가 있는 여러 항목을 포함하는 정렬되지 않은 목록이 있는 모바일 웹 응용 프로그램이 있습니다.li:

제 질문은 아이폰에서 볼 때 하이퍼링크의 크기가 변경되지 않고 가속도계가 세로에서 가로로 바뀌도록 어떻게 포맷할 수 있을까요?

세로 모드에서는 하이퍼링크 글꼴 크기를 다음 위치에 설정합니다.14px하지만 제가 장치를 가로로 바꾸면, 그것은 더 크게 터집니다.20px.

저는 글꼴 크기를 그대로 유지하고 싶습니다.

다음은 예제 코드입니다.

ul li a {
    font-size:14px;
    text-decoration: none;
    color: #cc9999;
}

<ul>
    <li id="home" class="active">
      <a href="home.html">HOME</a>
    </li>
    <li id="home" class="active">
      <a href="test.html">TEST</a>
    </li>
</ul>

를 통해 이 동작을 사용하지 않도록 설정할 수 있습니다.-webkit-text-size-adjustCSS 속성:

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

이 속성의 사용에 대해서는 Safari Web Content Guide에서 자세히 설명합니다.

참고: 사용하는 경우

html {
    -webkit-text-size-adjust: none;
}

그러면 기본 브라우저에서 확대/축소 동작이 비활성화됩니다.더 나은 솔루션은 다음과 같습니다.

html {
    -webkit-text-size-adjust: 100%;
}

이렇게 하면 데스크톱 동작을 변경하지 않고 iPhone/iPad 동작을 수정할 수 있습니다.

-webkit-text-size-adjust: none을 사용합니다. html에서 직접 사용하면 모든 웹킷 브라우저에서 텍스트를 확대/축소할 수 없습니다.당신은 이것을 iOS에 특화된 일부 미디어 쿼리와 결합해야 합니다.예:

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
     html {
        -webkit-text-size-adjust: none;
     }
}

전에 언급했듯이, CSS 규칙.

 -webkit-text-size-adjust: none

최신 장치에서는 더 이상 작동하지 않습니다.

다행히도 iOS5 및 iOS6에 대한 새로운 솔루션이 출시되었습니다(iOS7은 어떻습니까?).

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

추가할 수도 있습니다., user-scalable=0웹 사이트가 기본 앱처럼 작동하도록 핀치 줌을 해제합니다.사용자가 확대/축소할 때 설계 브레이크가 작동하는 경우 대신 다음 메타 태그를 사용합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

또한 normalize.css와 같은 CSS 재설정을 사용하도록 선택할 수 있으며, 여기에는 crazygringo가 권장하는 동일한 규칙이 포함됩니다.

/**
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

보시다시피 IE 전화에 대한 공급업체별 규칙도 포함되어 있습니다.

다른 브라우저에서 구현하는 방법에 대한 최신 정보는 MDN 참조 페이지를 참조하십시오.

HTML 헤더에 메타를 추가할 수 있습니다.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

2019년 3월 기준으로 텍스트 크기 조정은 모바일 브라우저에서 합리적인 지원을 제공합니다.

body {
  text-size-adjust: none;
}

사용.viewport메타 태그는 텍스트 크기 조정 및 설정에 영향을 주지 않습니다.user-scalable: no IOS Safari에서도 작동하지 않습니다.

아래 코드가 저에게 적용됩니다.

html{-webkit-text-size-adjust: 100%;}

작동하지 않으면 브라우저 캐시를 지우십시오.

나의 경우 이 문제는 CSS 속성을 사용했기 때문입니다.width: 100% 태그 HTML의 경우input type="text".

는 값을변습다니의 했습니다.width% 및 60% 추가 »padding-right:38%.

input {
    padding-right: 38%;
    width: 60%;
}

언급URL : https://stackoverflow.com/questions/2710764/preserve-html-font-size-when-iphone-orientation-changes-from-portrait-to-landsca