일부 웹 사이트 이미지가 iPhone에서 제대로 표시되지 않음

Question

반응 형 웹 사이트를 개발했으며 출시가 완벽하다고 생각했을 때 홈페이지의 이미지가 iPhones에서 올바르게 표시되지 않습니다. 사이트는 안드로이드에서 테스트하는 동안, 그래서 나는 지금까지 아이폰 기묘에 대해 현명하지 못했습니다.) 이미지는 화면의 너비에 맞추어야합니다 (최대 너비는 100 %로 설정되어 있음). 대신 실제 해상도를 초과하여 늘이거나 픽셀 화 된 방식으로 표시됩니다.

흥미롭게도 사이트의 다른 페이지의 이미지는 잘 표시됩니다. 나는이 문제가 홈페이지의 이미지가 CSS 배경 속성을 통해 실제로 설정되는 반면 다른 모든 이미지는 HTML의 <img> 태그로 설정된다는 사실에 뿌리를두고 있다고 생각했습니다. 그래서 나는 CSS 파일의 "배경"선언을 주석 처리하고 그 대신 다른 곳과 마찬가지로 홈페이지에 <img> 태그를 사용했습니다. 내가 처음 이미지에 그렇게했을 때, 그것은 훌륭하게 보였다. 그러나 나머지 이미지를 HTML로 전환하자마자 이전의 추악한 이미지로 되돌아갔습니다. (아이폰에 액세스 할 수 있습니다) 내 상사가 나에게이 비디오 (그것에 대한 사과가 초점이되고,하지만 당신은 아이디어를 얻을) 전송

는 : https://www.youtube.com/watch?v=_vFJVZiBc3Q

처음 네 개의 이미지를 그는 과거의 모든 맞게 에게서는 스크롤 당신은 실제 이미지의 왼쪽 ~ 1/10 정도만 볼 수 있습니다. 그것이 얼마나 멀리 펼쳐져 있는지입니다.

여기 아이디어가 없습니다. iPhone을 위해해야 ​​할 특별한 것이 있습니까? <img> 태그를 사용하면이 사진은 나머지 작업 이미지와 동일한 형식이어야합니다.

미리 감사드립니다.

Answer 1

밝혀진 바와 같이, 그것은 나에게 특정한 문제였습니다. 위의 애매한 것에 대한 사과, 나는 정말로 그것이 아이폰에 왔을 때 내가 무엇을 찾고 있어야했는지 전혀 몰랐다. 문제의 이미지는 <div>에 포함되어 있는데 높이는 vh 단위로 지정되었습니다. 이 책을 읽는 사람을위한 미래 참고 자료로서, 당신은 분명히 그렇게해서는 안됩니다. 높이를 백분율 단위로 변경하면 문제가 해결되어 Android와 iPhone 모두에서 뛰어난 결과를 보여줍니다!