CSS 배경이 Safari에서는 화면을 채우지 만 iOS에서는 그렇지 않습니다.

이 CSS는 화면 영역의 100 %를 채우고 사파리에서는 스크롤하지 않고 iOS에서는 스크롤하지 못하도록 성공적으로 배경 이미지를 확장합니다. iOS에서 이미지가 스크롤되는 것을 어떻게 방지 할 수 있습니까?CSS 배경이 Safari에서는 화면을 채우지 만 iOS에서는 그렇지 않습니다.

body { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    border: 0; 
    background: url(../img/background.jpg) center repeat-x; 
    background-size: auto 100%; 
    background-attachment: fixed 
}

출처

2014-03-27 user852974

나는 당신의 질문이 여기에 논의되었다고 생각합니다. >> http://stackoverflow.com/questions/9779195/does-a-background-attachment -of-fixed-work-in-ios5 – SULTAN

body { 
    width: 100%; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    border: 0; 
    background: url(../img/background.jpg) center repeat-x fixed; 
}

출처

2014-03-27 23:52:36 Eligreen

설명을 제공해 주시겠습니까? 현재 귀하의 답변은 불완전합니다. – bjb568

고정 된 속성을 배경의 같은 줄에 배치 할 수도 있습니다. 예를 들어 이미지 배경이 배경 0과 같이 맨 위의 위치에서 시작하도록 다른 매개 변수를 추가 할 수도 있습니다. url (../ img/background.jpg) center top repeat-x fixed; 매개 변수 가운데가 X 평면에 대한 첫 번째 매개 변수이기 때문에 – Eligreen

대답에 있어야합니다. – bjb568

나는 나의 아이폰 CSS 멋지게 연주하려고 노력 포기하고, jQuery를 사용에 의존해야했다. 그런 다음

<body> 
    <div class="cssFullScreen" /> 
    ...etc...

내가 CSS의 두 큰술에 추가 ...

<style> 
    .cssFullScreen 
    { 
     position: absolute; 
     left:0px; 
     top:0px; 
     background: url(BackgroundImage.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 
</style>

.. 그리고 마지 못해 내 웹 페이지에서

, 나는 내가 화면을 채우려 <div> 추가 jQuery의 특종 ...

<script src="jquery-2.2.3.min.js"></script> 
<script type="text/javascript"> 
    $().ready(function() { 

     ResizeWindows(); 

     $(window).resize(function() { 
      ResizeWindows(); 
     }); 
    }); 

    function ResizeWindows() { 
     // When the user resizes the window, we'll resize any DOM elements 
     // with the "cssFullScreen" class. 
     var width = window.innerWidth ? window.innerWidth : $(window).width(); 
     var height = window.innerHeight ? window.innerHeight : $(window).height(); 

     $(".cssFullScreen").width(width); 
     $(".cssFullScreen").height(height); 
    } 
</script>

정말 좋지는 않지만 실제로 발견 할 수있는 유일한 것입니다. 아이폰에서 일했다.

이상하게도이 코드는 div에 적용했을 때 iPhone에서만 작동했습니다. 내가 html 또는 body에 직접 적용하려고하면 아무 것도하지 않았습니다 ...

출처

2017-07-10 10:12:17

CSS 배경이 Safari에서는 화면을 채우지 만 iOS에서는 그렇지 않습니다.

답변

관련 문제