JQuery 자동 완성 (이전 플러그 인) 목록이 모바일 장치에서 매우 작게 나타납니다.

Question

이전 JQuery 자동 완성 플러그인 (여기에 표시된 내용 - http://view.jquery.com/trunk/plugins/autocomplete/demo/)을 사용하고 있습니다. 모바일 앱용으로 제작되었습니다. 플러그인은 데스크탑 브라우저에서 올바르게 작동합니다. 그러나 모바일 장치에서 자동 완성 제안의 플러그인 목록은 매우 작고 전혀 읽을 수 없습니다.

CSS의 글꼴 크기와 행 높이에 "em"값을 사용하려고했습니다. 게다가 CSS에 추가했습니다 -

@viewport { 
    width: device-width; 
} 

운이 없다! :(

이미 페이지의 내 모바일 앱 광고 나머지 메타 뷰포트이가 잘된다. 이와 같이

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

, JQuery와 플러그인은 I가 관리하는 경우 때문에, 작동하는 것 같군 그 작은 행 중 하나를 클릭하십시오 - 내 텍스트 필드에 올바른 값을 얻고있다. 그러나 자동 완성 목록을 너무 작아서 읽을 수 있고 올바른 CSS를이 작업을 얻으려면 알아낼 수 없습니다. 모든 포인터/제안을 높게 될 것이라고 감사합니다.

TIA, - Manish

Answer 1

나는 지금 고쳐졌다. 문제를 해결하는 동안 분명하지 않은 다소 미묘한 문제였습니다. 나는 많은 것을 파헤 쳤고 여기에 언급 된 @sandeep 제안을 포함하여 CSS로 많은 것을 해냈다. 그러나 아무도 작동하지 - 각각의 < 리 > 요소에 대한 CSS의 하드 코딩 된 "높이"특성으로, JQuery div의 요소를 더 크게 만들었지 만 JQuery 자동 완성 목록의 행은 더 커지지 만 여전히 그 행의 내용은 표시되지 않았습니다. 그러나, 내가 행을 두 드렸을 때 - 정확한 값이 텍스트 상자에서 대체 될 것입니다. 오히려 혼란스럽고 아마 AppleWebKit 브라우저가 내용을 렌더링하지 않았다고 제안했습니다.

서버에 JQuery와 자동 완성 목록 (우리는 사용자에 대한 다른 텍스트 및 백엔드에 대한 몇 가지 짧은 코드가 필요합니다) 거기에 3000 개 < 옵션 > 요소가 있고, AppleWebKit 브라우저 JQuery와 자동으로 그들에게 보여 거부 그것은 옵션 요소의 레이블 텍스트를 추출하여 JQuery와 자동 완성에 제공

 //needed as option list is not shown by AppleWebKit safari browser 
    formatItem: function(item, position, length, search){ 
     var name ="";  
     var str = "" + item;    
     var start = str.indexOf('">') + '">'.length; 
     var end = str.lastIndexOf("</"); 
     name = str.substring(start,end); 
     return name; 
    } 

- 완전한 행 (파이어 폭스가 문제없이 그들을 보여줄 수), 그래서 결국 나는JQuery와 formatItem 기능을 위해 작은 JS 코드를 작성 명부. 이렇게하면 문제가 해결되어 이제 JQuery 자동 완성 기능을 모바일 장치에서 제대로 사용할 수있게되었습니다. 나는 안드로이드 & 아이폰 (우리의 대상 장치)과 그것을 테스트하고 두 사람 모두 잘 작동 발견!

해결! :-)

Answer 2

모바일 장치에 CSS 속성을 별도로 정의해야 할 수도 있습니다. 예 :

@media all and (max-devide-width: 480px){ 
    .head{ 
     width:200px; 
      height:50px; 
    } 
}