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

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

... 제 질문은 하이퍼 링크를 iPhone에서 볼 때 크기가 변경되지 않고 가속도계가 세로-> 가로로 전환되도록 어떻게 하이퍼 링크를 포맷 할 수 있습니까? 현재 하이퍼 링크 글꼴 크기는 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 웹 컨텐츠 안내서에 자세히 설명되어 있습니다.

참고 : 사용하는 경우

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

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

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

데스크탑 동작을 변경하지 않고 iPhone / iPad 동작을 수정합니다.

-webkit-text-size-adjust 사용 : 없음; 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에 대한 새로운 솔루션이 제공됩니다 (todo : 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">

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

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

crazygringo가 권장하는 동일한 규칙을 포함하는 normalize.css 와 같은 CSS 재설정을 사용하도록 선택할 수도 있습니다 .

/**
 * 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{-webkit-text-size-adjust: 100%;}

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

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

body {
  text-size-adjust: none;
}

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

제 경우에는 width: 100%HTML 태그에 CSS 속성 을 사용했기 때문에이 문제가 발생했습니다.input type="text" .

의 값 width을 60 %로 변경 하고 추가했습니다 padding-right:38%.

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