iOS 장치 만 대상으로하는 CSS 미디어 쿼리

iOS 장치 만 대상으로하는 CSS 미디어 쿼리

---

iOS를 실행하는 장치 만 대상으로하는 @media 쿼리가 있습니까?

예를 들면 :

@media (min-device-width:320px) and (max-device-width:768px) {
    #nav {
        yada: yada;
    }
}

이로 인해 이러한 기기 너비를 가진 Android 기기의 페이지 동작도 변경 되나요?

---

그래 넌 할수있어.

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-overflow-scrolling: touch) {
  /* CSS for other than iOS devices */ 
}

YMMV.

Safari Mobile 만 구현 하기 때문에 작동합니다 -webkit-overflow-scrolling: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

참고 @supportsIE에서 작동하지 않습니다. IE는 위의 두 @support블록을 모두 건너 뜁니다 . 자세한 내용은 https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/를 참조 하십시오 . 이 때문에 사용 하지 않는 것이 좋습니다 @supports not.

---

짧은 대답 아니요. CSS는 브랜드에만 국한되지 않습니다.

다음은 미디어 만 사용하여 iOS 용으로 구현하는 문서입니다.

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://stephen.io/mediaqueries/

실제로 PHP, Javascript를 사용하여 iOS 브라우저를 감지하고 이에 따라 CSS 파일을 호출 할 수 있습니다. 예를 들어

http://www.kevinleary.net/php-detect-ios-mobile-users/

---

위에서 언급했듯이 짧은 대답은 아니오입니다. 하지만 지금 작업중인 앱에서 비슷한 것이 필요하지만 CSS가 달라야하는 영역은 페이지의 매우 특정 영역으로 제한됩니다.

나와 같고 완전히 다른 스타일 시트를 제공 할 필요가없는 경우 다른 옵션은이 질문의 선택한 답변에 설명 된 방식으로 iOS를 실행하는 기기를 감지하는 것입니다. 기기가 iOS인지 감지

iOS 장치를 감지하면 Javascript (예 : document.getElementsByTagName("yourElementHere")[0].setAttribute("class", "iOS-device");, jQuery, PHP 등)를 사용하여 대상 영역에 클래스를 추가하고 기존 스타일 시트를 사용하여 그에 따라 해당 클래스의 스타일을 지정할 수 있습니다 .

.iOS-device {
      style-you-want-to-set: yada;
}

참고 URL : https://stackoverflow.com/questions/30102792/css-media-query-to-target-only-ios-devices