iOS 기기만을 대상으로 하는 CSS 미디어 쿼리

iOS 기기만을 대상으로 하는 CSS 미디어 쿼리

이 질문에는 이미 다음과 같은 답이 있습니다.

iPhone/iPad를 CSS로만 검색 (5개 답변)

마감됨3년 전에.

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

예:

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

이것이 이러한 장치 폭을 가진 Android 장치의 페이지 동작도 변경할 수 있습니까?

네, 가능합니다.

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

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

YMMV.

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

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

iOS에서 크롬이나 파이어폭스는 어떻습니까?현실은 이것들이 WebKit 렌더링 엔진의 스킨에 불과하다는 것입니다.따라서 위의 내용은 iOS 정책이 변경되지 않는 한 iOS에서 어디서나 작동합니다.앱스토어 검토 지침의 2.5.6을 참조하십시오.

경고: iOS는 향후 몇 년 내에 모든 새로운 iOS 릴리스에서 이에 대한 지원을 제거할 수 있습니다. 당신은 위의 CSS가 필요하지 않도록 조금 더 노력해야 합니다. 이전 버전의 이 답변이 사용되었지만 새 iOS 버전이 이 답변을 제거했습니다.한 논평가가 지적했듯이, 지원되는 CSS 속성으로 이동하여 "Safarion iOS"를 검색하십시오.

iOS 전체를 대상으로 하는 것에 대해서는 잘 모르겠지만, 특히 iOS Safari를 대상으로 하는 것은 다음과 같습니다.

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

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

분명히 iOS 13에서.-webkit-overflow-scrolling에 더 이상 응답하지 않습니다.@supports,그렇지만-webkit-touch-callout여전히 그렇습니다.물론 그것은 미래에 바뀔 수 있습니다.

위에서 언급한 바와 같이, 간단한 대답은 아니오입니다.하지만 저는 제가 지금 작업하고 있는 앱에서 비슷한 것이 필요하지만, CSS가 달라야 하는 영역은 페이지의 매우 특정한 영역으로 제한됩니다.

저와 마찬가지로 완전히 다른 스타일시트를 제공할 필요가 없다면 이 질문의 선택된 답변에 설명된 방법으로 iOS를 실행하는 장치를 검색하는 것도 방법입니다.장치가 iOS인지 탐지

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

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

단답 No. 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/

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