[iphone] position : fixed가 iPad 및 iPhone에서 작동하지 않습니다

Program / 글쓴이

나는 잠시 동안 iPad에서 고정 위치로 고심하고 있습니다. 나는 iScroll을 알고 있으며 항상 데모 에서조차 작동하지는 않습니다. 또한 Sencha에 대한 수정 사항이 있지만 해당 수정의 소스 코드를 Ctrl+ 할 수 없습니다 F.

누군가가 해결책을 가질 수 있기를 바랍니다. 문제는 사용자가 iOS 기반 모바일 Safari에서 팬 / 업 / 업할 때 고정 위치 요소가 업데이트되지 않는다는 것입니다.

답변

많은 모바일 브라우저 position:fixed;는 고정 요소가 작은 화면에서 방해가 될 수 있다는 이유로 고의적으로 지원하지 않습니다 .

Quirksmode.org 사이트에는 문제를 설명하는 매우 좋은 블로그 게시물이 있습니다. http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

또한 지원되는 모바일 브라우저를 보여주는 호환성 차트는이 페이지를 참조하십시오 position:fixed;. http://www.quirksmode.org/m/css.html

(그러나 모바일 브라우저 세계는 매우 빠르게 움직이고 있으므로 이와 같은 테이블은 오랫동안 최신 상태로 유지되지 않을 수 있습니다!)

업데이트 : iOS 5와 Android 4는 모두 position : fixed 지원이 있다고보고되었습니다.

나는 오늘 Apple Store에서 iOS 5를 직접 테스트했으며 고정 위치에서 작동하는지 확인할 수 있습니다. 그래도 고정 요소를 확대하고 이동하는 데 문제가 있습니다.

이 호환성 표는 quirksmode보다 훨씬 최신이며 유용합니다.
http://caniuse.com/#search=fixed

그것은 안드로이드, 오페라 (미니 및 모바일) 및 iOS에 대한 최신 정보가 있습니다.

답변

고정 위치는 컴퓨터에서와 같이 iOS에서 작동하지 않습니다.

돋보기 (뷰포트) 아래에 한 장의 종이 (웹 페이지)가 있다고 가정하고 돋보기와 눈을 움직이면 페이지의 다른 부분이 보입니다. 이것이 iOS의 작동 방식입니다.

이제 단어가 적힌 투명한 플라스틱 시트가 있습니다.이 플라스틱 시트는 무엇이든 (위치 : 고정 요소) 고정되어 있습니다. 따라서 돋보기 를 움직이면 고정 요소 가 움직이는 것처럼 보입니다 .

또는 돋보기를 이동하는 대신 플라스틱 시트와 돋보기를 그대로 유지하면서 종이 (웹 페이지)를 이동합니다. 이 경우 플라스틱 시트에있는 단어는 고정 된 상태로 유지되고 나머지 내용은 이동하는 것처럼 보입니다 (실제로 있기 때문). 이것은 일반적인 데스크탑 브라우저입니다.

따라서 iOS에서는 뷰포트가 이동하고 기존 브라우저에서는 웹 페이지가 이동합니다. 두 경우 모두 고정 요소는 여전히 실제 상태입니다. iOS에서는 고정 요소가 움직이는 것처럼 보입니다.

이 문제를 해결하는 방법은 이 기사 의 마지막 몇 단락을 따르는 것입니다.

(기본적으로 스크롤을 모두 비활성화하고 내용을 별도의 스크롤 가능한 div에 저장하고 (링크 된 기사 상단의 파란색 상자 참조) 고정 요소는 절대적으로 배치하십시오)

“position : fixed”는 이제 iOS5에서 예상 한대로 작동합니다.

답변

position : fixed는 세로 스크롤을 위해 android / iphone에서 작동합니다. 그러나 메타 태그가 완전히 설정되어 있는지 확인해야합니다. 예 :

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

또한 Android 4.0 이전 버전에서 동일한 페이지를 사용할 계획이라면 최상위 위치도 설정해야합니다. 그렇지 않으면 어떤 이유로 작은 여백이 추가됩니다.

답변

이제 애플 지원

overflow:hidden;
-webkit-overflow-scrolling:touch;

답변

Safari (iOS 10.3.3) 에서이 문제가 발생했습니다. 터치 엔드 이벤트가 시작될 때까지 브라우저가 다시 그려지지 않았습니다. 고정 요소가 나타나지 않거나 잘 렸습니다.

나를위한 비결은 transform을 추가하는 것입니다 : translate3d (0,0,0); 고정 위치 요소에.

.fixed-position-on-mobile {
  position: fixed;
  transform: translate3d(0,0,0);
}

편집 -이제 변형이 문제를 해결하는 이유를 알고 있습니다. 하드웨어 가속. 3D 변환을 추가하면 GPU 가속이 트리거되어 부드럽게 전환됩니다. 하드웨어 가속 체크 아웃에 대한 자세한 내용은 http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css를 참조하십시오 .

답변

고정 바닥 글 (여기서는 jQuery 사용) :

if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || navigator.platform == 'Linux armv6l')
{
    window.ontouchstart = function ()
    {
        $("#fixedDiv").css("display", "none");
    }

    window.onscroll = function()
    {
        var iPadPosition = window.innerHeight + window.pageYOffset-45; // 45 is the height of the Footer
         $("#fixedDiv").css("position", "absolute");
         $("#fixedDiv").css("top", iPadPosition);
         $("#fixedDiv").css("display", "block");
    }
}

// in the CSS file should stand:
#fixedDiv {position: fixed; bottom: 0; height: 45px;  whatever else}

도움이 되길 바랍니다.

답변

transform : — 및 position : fixed를 사용하여 동일한 상자에서 사용하지 마십시오. 변환이 있으면 요소는 position : static 위치에있게됩니다.