ASP.NET MVC 부트 스트랩 iPhone 탐색 표시 줄 UI 문제

Visual Studio 2013의 기본값을 사용하여 새 ASP.NET MVC 웹 사이트를 설정했습니다. 사용중인 모든 라이브러리를 업데이트하여 최신 버전의 부트 스트랩 및 기타 CSS, JavaScript 및 MS 라이브러리가 설치되어 있어야합니다.ASP.NET MVC 부트 스트랩 iPhone 탐색 표시 줄 UI 문제

내가 발견 한 것은 기본 폼에 유효성 검사를 추가하면 부트 스트랩 탐색 모음이 맨 위에 머물러 있지 않고 iPhone의 화면 중간에 위치한다는 것입니다. 스크린 샷은 다음과 같습니다. enter image description here

메뉴가 맨 위에있는 것이 아니라 화면 가운데에 있음을 알 수 있습니다.

중복하려면 iPhone에서 URL을 열고 제출을 클릭하면 유효성 검사 오류가 발생하고 UI 문제가 표시됩니다.

참고, 개별 링크를 볼 수 있도록 묶음을 제거했습니다. 또한 편의를 위해 헤더를 모두 넣었습니다. 프로덕션에서 할 일이 아닙니다.

탐색 표시 줄을 고정하는 솔루션은 무엇입니까?

var is_ios = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false); 
     if(is_ios) { 
     $(document) 
     .on('focus', 'input, textarea', function(e) { 
      $('body').addClass('fixfixed'); 
     }) 
     .on('blur', 'input, textarea', function(e) { 
      $('body').removeClass('fixfixed'); 
     });   
     }

추가 된 다음과 같은 CSS 업데이트 :

.form .form-control { 
    font-size: 16px; 
} 

.fixfixed .navbar { 
    position: relative; 
    top: auto; 
}

부트 스트랩 후 다음과 같은 자바 스크립트를 실행

: 숙련 된 CSS 프로그래머의 도움으로

출처

2014-07-23 Josh

아마도 도움이 될 수 있습니다. https://forum.jquery.com/topic/iphone-safari-address-bar-jumps-down-after-page-transition 또는 https://forum.jquery.com/ 주제/멈추다 - url-bar-from-dropp ing-down-i-discovered-a-workaround – Robert

제 생각에 이것은 부트 스트랩과 관련이있어서 jQuery 모바일 솔루션이 도움이되지 않을 것입니다. iOS에 대한 더 큰 문제인 경우 도움이 될 수 있지만 jQuery 모바일과 부트 스트랩의 차이점을 알아야합니다. – Josh

관련이있을 수 있습니다 : http://dansajin.com/2012/12/07/fix-position-fixed/ –

, 나는 다음과 같은 업데이트로 해결 할 수 있었다

출처

2014-07-23 16:07:07 Josh

ASP.NET MVC 부트 스트랩 iPhone 탐색 표시 줄 UI 문제

답변

관련 문제