JS 또는 JQuery를 사용하여 장치 방향에 따라 img src를 동적으로 편집

StackOverflow https://stackoverflow.com/questions/8881988

문제

저는 HTML 문서를 WebKit 기반보기 (Chromeless 버전의 Mobile Safari)로로드하는 iOS 잡지 프레임 워크 (PugPig)를 사용하고 있습니다.

기기의 방향에 따라 각 '페이지'에서 의 세로 또는 가로 버전을로드하고 싶습니다.여러 가지 이유로 CSS 배경 이미지가 아닌 여야하므로 미디어 쿼리가 작동하지 않습니다.로컬 장치에서 HTML을로드하고 있기 때문에 웹 서버도 사용할 수 없습니다.

그래서 JS가 갈 길이라고 생각하지만 페이지 새로 고침없이 즉시 방향 변경 (또는 적어도 화면 너비)을 감지해야하며 이것이 가능한지 모르겠습니다.

JS에 익숙하지 않으므로 샘플 코드가 없습니다 (지금까지 시도한 모든 시도는 자동차 충돌입니다).죄송합니다.

어떤 도움이라도 감사합니다.

도움이 되었습니까?

해결책 2

OK, 결국 img의 display 속성을 설정하여 CSS Media Queries를 사용하는 솔루션을 찾았습니다.약간의 퍼지이지만 지금은 괜찮습니다.

기본적으로 두 개의 div를 만들었습니다. 하나는 '가로'ID가 있고 다른 하나는 '세로'가 서로 절대적으로 위에 위치합니다.그런 다음 @media 쿼리를 사용하여 display : 속성으로 관련 div를 표시하거나 숨겼습니다.웹에는 전혀 적합하지 않지만 메모리에서 직접 데이터를로드하는 iPad 앱에는 괜찮습니다.그리고 이것은 "반응 형 이미지"가 등장하기 전이었습니다.

다른 팁

jQuery mobile의 orientationchange 이벤트 를 사용해 보셨습니까?

나는 한 번도 해본 적이 없지만이 방법을 사용할 수있을 것 같습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top