2013-02-05 5 views
1

모바일 웹 페이지를 만들고 다양한 화면 크기를 처리하는 데 어려움이 있으며 기본적으로 내 페이지는 브라우저가 아닌 실제 화면의 너비로 만들고 싶습니다. 나는 페이지가되도록 그것을 만들기 위해 할 수있는 일화면의 창 너비 만들기

<meta name="viewport" content="width=device-width, initial-scale=1"></meta> 

: 때문에 모바일 브라우저의 작업 방식의

는 대부분의 브라우저의 기본 "폭"다음 메타 태그가 설정되어 320 픽셀입니다 브라우저의 "해상도"가 아닌 화면의 전체 해상도?

은 .. 몇 가지 간단한 해결책이 있어야합니다

주 : 2로 초기 규모의 플래그를 설정 페이지 모두 내 아이폰과 안드로이드 휴대 전화에서보다 작은 320 개 픽셀 (640 및 480 개 픽셀의 폭 각각) 및 설정을했다 그것은 .5 두 장치에서 640px 페이지를 만들었지 만 안드로이드 장치를 확대했습니다. 그것은 아이폰에 원하는 효과를 .. 준

내 페이지 :

여기
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, target-densitydpi=device-dpi"> 

것은 당신이 좋은 찾을 수있다 : mmhudson.com/index1.html

+2

콘텐츠 목록에'target-densitydpi = device-dpi'를 추가하면 도움이됩니까? – cimmanon

+0

@cimmanon 솔루션이 효과를 발휘했습니다. 제발 대답하고 받아 들일 것입니다. – maxhud

답변

2

해당 목록에서 누락 된 속성은 target-densitydpi=device-dpi입니다. 그것이 중간 밀도 화면의 기본 모양에 맞는 크기 그려되도록

http://developer.android.com/reference/android/webkit/WebView.html

기본적으로

는 웹보기는 웹 페이지를 조정합니다. 따라서 은 픽셀이 이기 때문에 고밀도 화면에서 1.5x 배율을 적용하고 픽셀이 이기 때문에 저밀도 화면에서 0.75 배 배율을 적용합니다.

그리고

장치 dpi의 - 대상 dpi의에 따라 장치의 기본 dpi로 사용합니다. 기본값 스케일링이 발생하지 않습니다.

0

는 최대 규모를 추가하고이 같은 densitydpi 무언가를 추가하려고 했나 모바일 브라우저의 예 :

https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag 

하지만 브라우저에 따라 다를 수 있습니다.

관련 문제