iPad의 Safari에서 배경 배율을 보정하는 방법은 무엇입니까?

Question

div 컨테이너 (100 % x 100 %)에서 거대한 배경 이미지 (2000x1500)를 사용하는 웹 사이트가 있습니다.

iPad에서 Safari에서 해당 사이트를 열면 콘텐츠 (~ 80 %)와 다른 비율로 축소 (~ 40 %)됩니다.

너비가 100 %이고 높이가 10000이고 오버플로 설정이 "숨김"인 div에서 배경을 img-tag로 옮겼습니다. 똑같은 일이 일어난다.

사파리가 콘텐츠와 동일한 비율로 배경 이미지를 축소 할 수있는 CSS 설정이 있습니까?

Answer 1

iPad 용으로 별도의 스타일 시트를 만들어야합니다. 이렇게하려면 다음을 사용할 수 있습니다

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" /> 

를이 링크에, 당신은 아이 패드에 당신의 웹 사이트의 방향을 어떻게 처리하는 방법에 대한 정보를 찾을 수 있습니다.

귀하의 사이트 iPad 버전에 대해 별도의 스타일 시트 (CSS 파일)를 만들려면 무엇을 하든지 관계없이 위의 그림과 같은 링크 태그를 추가해야합니다.

iPad 버전의 경우 배경이 2000x1500px 인 경우 문제가있는 경우 iPad에 맞게 축소 할 수 있습니다. 나는 이미지의 크기를 1024px로 줄이고 iPad 용 별도의 스타일 시트에 선언해야한다고 말하면 최종 결과를 볼 수 있습니다.

어떻게 진행되는지 알려주세요.

BTW 당신은뿐만 아니라이 글을 읽어야 할 사람 : http://www.inspiredm.com/2010/02/09/ipad-design/

Answer 2

당신이 (가) < 몸 > 태그가 부착 된 배경 이미지가있을 때이 문제는 아이 패드에 발생하는 것으로 보인다. 포함 된 div에 배경 이미지를 배치하면 문제가 해결 될 수 있습니다. IE에서 배경 고정 작업을 수행하는 기술로 배경 이미지를 "고정"할 필요가없는 경우 큰 문제 해결 방법입니다. 이미지의 경우 < 본문 > 태그를 사용해야합니다.

처음이 (의한 배경 화상에 고정 위치에) 위치 결정 용 < 본체 > 태그를 사용하며, 두 번째는 컨테이너 div 사용이 두 사이트의 차이를 볼 수

http://www.mricsi.com http://www.collinshirsch.com을

희망 하시겠습니까?

편집 - 이것은 완전히 정확하지 않습니다. 이는 약간의 경우 일 뿐이며 이유는 분명하지 않은 것 같습니다.

Answer 3

div에 (스크롤링) 배경 이미지로 5400x556이 있습니다. .jpg는 .png로 축소되어 대폭 축소됩니다. 유일한 문제는 .png가 5 메가입니다. Grr.

별도의 스타일 시트를 사용해 주셔도 좋습니다.나는 배경 캔버스에 배경 이미지를했을 때이 나를 위해 일 추가

행운

오웬

Answer 4

...

body{ -webkit-background-size: 2000px 1400px;} 

은 분명히 하나의 올바른으로 치수를 교체해야한다 이미지의 크기.

Answer 5

내가 사용

body {min-width:2000px; min-height:1500px } 

Answer 6

당신은 아이 패드에 대한 구분 스타일 시트를 만들 수 @UXdesigner의 솔루션을 사용할 수 있습니다.

@media only screen and (max-device-width: 1024px){ 
    .yourClassname{ 
    max-width: 500px; 
    } 
} 

및 전화와 같은 작은 장치에 대한 물론

당신이 사용할 수 있습니다 :

@media only screen and (max-device-width: 480px){ 
    .yourClassname{ 
    max-width: 100px; 
    } 
} 

참고 이러한 제안은 (CSS3의 최신 장치를 작동하는지 그러나 당신은 당신의 현재 스타일 시트에 하나의 문을 사용할 수 있습니다 모두 이것을 받아 들인다)