중심으로 위치 : 모바일 브라우저에 고정 잘못 확대

내가이 예에서와 같이 뷰포트의 상단에 텍스트를 기준으로 중앙에 고정 할 수있는 페이지의 상단에 로고가있어 : http://dev.markbrouwers.nl/test.html 중심으로 위치 : 모바일 브라우저에 고정 잘못 확대

<h1 style="width: 200px; height: 100px; margin: 0 auto;"> 
    <img src="images/logoforeground.png" style="position: fixed; display: block;" alt="Page title"> 
</h1> 
<div style="width: 800px; margin: 0 auto;"> 
    <p>content</p> 
</div>

을

완벽하게 PC에서 작동합니다. 그러나 모바일 브라우저에서 로고를 확대하면 중심에서 벗어나 시작합니다. iOS에서 고정 된 위치와 iOS 5 및 Android 2.2에서 작동해야 할 점에 대해 꽤 많은 것들 (예 : this)을 읽었습니다. 그렇지 않다는 것을 알았습니다 ... 아직 어떻게 변화하는지 알고 있습니까? 모바일 웹킷은 PC 브라우저처럼 작동합니까?

[편집]

나는 조금, H1 나는 또한 아이폰과 윈도우에서 스크린 샷을 만든 용기

외부 지금 HTML을 편집했다. 보시다시피 iOS를 확대하면 로고가 뷰포트에서 벗어납니다. 크롬 브라우저에서는 뷰포트의 최상단 중간에 위치합니다.

사파리/iOS5를 스크린 샷 : enter image description here

크롬/Win7에 스크린 샷 : enter image description here

출처

2012-11-14 J.H.

간단한 자바 스크립트, 그리고 나를 위해 그것을 정상적인 행동, 당신의 로고는 페이지를 중심으로하고 유지,하지만 손가락 움직임에 따라 오른쪽으로 스크롤하는 경향이 있습니다. 그러나 확대 한 후에는 수평 스크롤바를 가운데로 움직이면 로고가 페이지 중앙에 나타납니다. – Nelson

이런 일이 발생하는 이유는, 모바일 기기 심지어 경우, 페이지의 폭을 알 필요가있다 귀하의 페이지 너비는 340px입니다. 예를 들어 여전히이 문제에 부딪 힐 것입니다. 크기 조정이 아니기 때문에 확대됩니다.

후 다음 텍스트를 변경하는 일부 자바 스크립트로 해당 버튼 링크

두 개의 버튼 소형/대형 :

텍스트는 사용자의 큰 싶은 경우는, 최적의 솔루션은 다음과 같은 것을 가지고있다 크기는 원하는 것을 기준으로합니다.

큰 것을 클릭하면 24px 으로 가고 작은 것을 클릭하면 14px가됩니다. 당신은 확대 할 때, 페이지

내가 내 안드로이드 2.3.6 넥서스 하나를 테스트했습니다

출처

2012-11-14 01:30:35 RussellHarrower

중심으로 위치 : 모바일 브라우저에 고정 잘못 확대

답변

관련 문제