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

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%;
}

As you see, it also includes a vendor specific rule for the IE Phone.

For current information about the implementation in different browsers, refer to the MDN reference page.

---

The below code works for me.

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

Try with clearing your browser cache if it does not work.

---

In my case this trouble has been because I used CSS attribute width: 100% for HTML tag input type="text".

I changed value of width to 60% and add padding-right:38%.

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

---

As of March 2019 text-size-adjust has a reasonable support amongst mobile browsers.

body {
  text-size-adjust: none;
}

Using viewport meta tag has no effect on the text size adjustment and setting user-scalable: no does not even work in IOS Safari.

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