2013-07-18 2 views
1

반응 형 템플릿을 만들었으며 다음과 같은 문제가 있습니다.다른 장치에 대한 반응 형 사이트 뷰포트 문제

해상도가 데스크톱에서는 480px보다 작고 휴대 전화에서는 540px보다 작은 미디어 쿼리를 만들었습니다. 데스크톱에서는 정상적으로 작동하는 전화기에서 정상적으로 작동합니다.

@media only screen and (max-device-width: 540px), 
screen and (max-width: 480px) { 

그래서 태블릿에서 사이트를 열면 데스크톱 버전이로드되고 (예상대로) 확대 된 결과가 표시됩니다. 나는 0.6

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

에서 최대 규모의 다음과 같은 코드를 사용하는 경우

내가 제대로 태블릿보기를 얻을,하지만 휴대폰에이 확대 아웃입니다.

나는이 작품을 만들기 위해 모든 곳을 수색하고 모든 조합을 시도했다. 내가 깨닫는 것에서는 전화기의 경우 최대 = 1, 태블릿의 경우 최대 0.6을 원합니다. 어떻게이 일을 성취 할 수 있습니까?

미리 감사드립니다. 그것이 이루어지기를 바랍니다.

편집 : 삭제 된 URL.

답변

1

최대 배율이 0.6으로 설정 되었기 때문입니다. 이것은 웹 사이트가 60 %로 표시되었음을 의미합니다. 그것을 그대로 두거나 1.0으로 설정하면

+0

으로 설정하십시오. 그러면 1로 설정하면 태블릿보기가 확대됩니다./ – scooterlord

+0

... 즉, max-scale = 1로 설정하면 일반 전화보기 및 확대/축소가 가능합니다. 태블릿에서 최대 눈금 = 0.6 인 경우 정상적인 태블릿 뷰를 얻고 전화기를 축소합니다. 나는이 두 가지 중에서 혼합을 찾고 있습니다. :/이중 게시에 대해 미안합니다 – scooterlord

+0

전화 또는 태블릿에있는 것을 감지하는 스크립트를 사용해 볼 수 있습니다 – Stinodotbe