2012-11-06 2 views
1

.0 모바일 장치로 입력 필드에 레이블을 정렬하는 데 문제가 있습니다 (일반 브라우저에는 아무런 문제가 없습니다).레이블을 입력하고 동일한 행을 입력하십시오.

내가 무엇을 가지고 :

내가 무엇을 내가

<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0"> 

예와 같은 미디어 쿼리가 내 머리에서

<div data-role="fieldcontain"> 
    <label for="name">Label:</label> 
    <input data-mini="true" type="text" name="name" id="name" value="" /> 
</div> 

:

라벨


무엇 나는 450p 이하로 갖고 싶다. X 즉 :

라벨 _ __ _ ____ 폭 450 픽셀에 걸쳐있는 경우 (CSS를 내의 미디어 쿼리에 따라)

라벨이 입력 필드의 좌측으로 이동한다. 내 로컬 브라우저의 매력처럼 작동합니다. 그러나 해상도 (s3, iphone 및 기타 장치를 시도 함)에 관계없이 모든 모바일 장치로이 장치에 액세스하면 레이블이 항상 텍스트 필드 상단에 표시됩니다 (비 가로 모드).

이 동작이 모바일 장치에서 발생하는 이유를 알고 싶습니다. 이것에는 sth가있다. 뷰포트와 관련이 있습니까? 모바일 장치 및 특정 미디어 쿼리에 친숙하지 않습니다.

그리드 및 표와 같은 대안이 있음을 충분히 알고 있습니다. 하지만 내 웹 응용 프로그램에 대한이 동작을하고 싶습니다. 작은 장치에서는 2 줄로 표시되는 것이 좋습니다. jquery 모바일 클래스를 재정의하고 내 방법을 경우 내 솔루션을 작성하지 않고 그것을하고 싶습니다.

미리 감사드립니다.

답변

1

CSS 파일 :

jquery.mobile-1.2.0.min.css

편집 :

3227.line : @media all and (min-width:300px) {

+0

당신은? 조금 정교한 수있는 방법은 jquery.mobile-1.3.0 – Daniel

+0

와 함께 일하는 것이 또한 .min에는 너무 많은 줄이 없습니다. – Daniel

+0

동일한 문제가 있습니다. 해결책을 자세히 설명해 주시겠습니까? –

관련 문제