아이폰에서 떨리는 문자

아이폰에서 떨리는 문자

여기 아이폰(4S)에는 이상한 버그가 나타나지만 아이패드(3)나 데스크톱 브라우저에는 나타나지 않습니다.이 사이트에서 페이지를 로드하면 다음과 같이 말합니다.

http://www.courtniv.com/what-is-eco-fashion/

제 아이폰에서 빵 부스러기는 "홈 »는 »를 의미합니다. 에코 패션이란 무엇인가요?"라는 글이 정신 분열증처럼 보입니다.이것은 1초에 약 3번, 앞뒤로 크기를 정확한 크기에서 몇 포인트 더 큰 크기로 빠르게 바꿉니다.기사 텍스트가 흔들릴 때도 있고, 두 번째 단락부터 흔들릴 때도 있습니다.때때로 바닥글 저작권 텍스트도 불안정합니다.

제거하려고 했습니다.

<?php get_template_part('includes/scripts'); ?>

바닥글에서 처음에는 작동하는 것처럼 보였지만 나중에 몇 가지 문제가 다시 발생했습니다.사용자 정의 스타일시트에서 글꼴 크기 선언을 제거했을 때와 같은 이야기입니다.아이폰에서 자바스크립트를 비활성화했는데도 문제가 남아있습니다.

이상하게도 아이폰에 페이지를 로드할 때마다 이렇게 되는 것은 아니지만 대부분의 경우 그렇게 됩니다.코드에서 무언가를 변경하면 다음 새로 고침 시에는 중지되지만 나중에 몇 가지 새로 고침이 반환되는 경우가 많습니다.가끔 페이지를 로드하고 아무 일도 하지 않고 조금만 기다리면 정신분열증이 멈추기도 합니다.때로는 기사 텍스트의 흔들림은 멈추지만 빵 부스러기는 계속해서 흔들릴 것입니다.페이지를 새로 고치면 거의 항상 페이지가 바로 되돌아옵니다.그리고 페이지 로딩이 완료된 후에도 확실히 계속됩니다.지금은 10분째 계속되고 있습니다.화면이 잠기고 방향이 바뀌고 사파리가 다시 닫히고 열리면 계속 흔들립니다.

10년 동안 웹 디자인을 하면서 이런 일은 처음 봅니다.원인이 무엇인지 또는 어떻게 해결해야 하는지에 대한 단서가 있습니까?감사합니다!

저는 그런 문제를 경험해 본 적이 없습니다.그러나 여기에는 두 가지 해결책이 있습니다.

솔루션 #1

CSS에 다음 사항을 추가하면 글꼴 크기가 조정되는 것을 방지할 수 있습니다.

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

iPhone에서만 문제가 발생하는 것처럼 보이므로 미디어 쿼리가 있는 해당 단말기만 대상으로 지정하는 것이 타당합니다.

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

이를 적용하는 대신html에 추가할 수 있습니다.#breadcrumb, .post-meta크기 조정 문제가 동일한 다른 셀렉터를 선택할 수 있습니다.

솔루션#2

이 문제는 다음 규칙 집합과도 관련이 있는 것 같습니다.

a,
.textwidget a img,
div.category a,
.sociable ul li {
  -webkit-transition: all .3s ease;
  -khtml-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

다음으로 변경:

@media only screen and (max-device-width: 960px) { 
  a,
  .textwidget a img,
  div.category a,
  .sociable ul li {
    -webkit-transition: none;
    transition: none;
  }
}

또한 문제를 해결할 것입니다.

당신의 경우, 솔루션 #1이 대상 요소의 텍스트 크기를 축소하기 때문에 솔루션 #2를 선택했을 것입니다.

언급URL : https://stackoverflow.com/questions/10825615/trembling-text-on-iphone