jquery mobile - 안드로이드 폰의 뷰포트 값

저는 Jquery Mobile을 처음 사용하기 때문에 뷰포트 값을 설정하여 이미지를 올바르게 렌더링하는 방법을 이해하지 못합니다. 테스트 할 단계는 다음과 같습니다.jquery mobile - 안드로이드 폰의 뷰포트 값

하나의 이미지를 480x432로 준비했습니다. 당신이 볼 수 있듯이

:

<html> 
<head>  
<meta name="viewport" content="initial-scale=1.0, target-densitydpi=device-dpi，width=device-width, minimum-scale=0.1, user-scalable=no"/> 
<link href="style/jquery.mobile.theme-1.1.1.min.css" rel="stylesheet" type="text/css"/> 
<link href="style/jquery.mobile.structure-1.1.1.min.css" rel="stylesheet" type="text/css"/>  
<script src="js/jquery.js" type="text/javascript"></script> 
<script src="js/jquery.mobile-1.1.1.min.js" type="text/javascript"></script> 
</head> 
<body style="margin:0;"> 
<div data-role="header" data-position="fixed" data-theme="f"> 
<a href="sm_app_home.html" data-theme="a" data-mini="true" data-icon="home" class="ui-btn-left">Home</a> 
<a href="sm_app_home.html" data-theme="a" data-mini="true" data-icon="gear" class="ui-btn-right">settings</a> 
</div> 
    <div data-role="content"> 
    <div id="bld" class="bld" style="position: absolute; width: 250px; height: 125px; left: 161px; background-color: #ccccff; top: 185px;">Hello world.</div> 
    <img id="bl1" src="img/sc_museum/480x432.jpg" /> 
</div> 
<script> 
    $("#bl1").click(function(){ 
    var pageWidth = $(document).width(); 
    var pageHeight = $(document).height(); 
    var viewportWidth = $(window).width(); 
    var viewportHeight = $(window).height(); 
    $("#bld").html("Page width: "+pageWidth+"<br />pageHeight: "+pageHeight+"<br />port width: "+viewportWidth+"<br />port height: "+viewportHeight); 
}); 
</script> 
</body> 
</html>

3. 응용 아래처럼 내 삼성 갤럭시 SII에서 실행 enter image description here

는이 같은 테스트 페이지를 썼다 이미지는 좋지만 단추와 레이블 텍스트는 너무 작습니다.

은 내가 viewport 값 설정에 target-densitydpi=device-dpi을 제거하고 내 응용 프로그램과 같은 다음과 같습니다

enter image description here

당신은 버튼과 레이블 텍스트를 볼 수 있듯이

는 그러나 이미지 오버 플로우 좋다.

내 질문 :

나는 특정 뷰포트 값을 사용할 때 나는 보라색 블록의 값과 같은 페이지 너비/높이와 포트 너비/높이 값을 얻을 왜

?
제안 된 뷰포트 값은 무엇이며 이미지 너비/높이를 처리하는 방법은 무엇입니까?

나는 이미지 너비/높이가 픽셀이지만 안드로이드 전화 화면은 이것을 사용하지 않지만 여전히 화면에 맞게 이미지의 크기를 조정하는 방법을 모르겠다.

출처

2012-08-06 Lenciel

픽셀 대신 "em"에서 너비와 높이 단위를 사용하고 시도해보십시오. 픽셀 비율은 장치마다 다르므로 px는 장치에서 동일하게 렌더링되지 않습니다.

출처

2012-09-06 08:34:59 IvenMS

문제는 - 내 경우에는 크기를 조정하지 않고 가능한 화면의 부동산을 가능한 많이 사용해야하는 이미지를 서버 측에서 생성하려고합니다. 이미지를 생성하려면 사용 가능한 뷰포트의 실제 픽셀 크기를 알아야합니다. – pQd

target-densitydpi = device-dpi를 사용하면 모바일 브라우저가 기본 픽셀을 제공합니다. target-densitydpi = device-dpi를 사용하지 않으면 모바일 브라우저가 페이지를 확대/축소합니다.

제 생각에는 사용자가 어떤 모바일 장치를 사용하고 있는지 알 수 없기 때문에 사용할 수있는 뷰포트 크기를 알 수 없습니다. 자바 스크립트로 크기를 감지하는 방법은 훌륭하고 효과적입니다. 뷰포트 크기를 얻은 다음 사용자 정의 이미지를로드 한 후에는 서버로 Ajax 호출을 할 수 없습니까?

출처

2012-09-11 12:03:39 Tsunamis

jquery mobile - 안드로이드 폰의 뷰포트 값

답변

관련 문제