CSS взломать только для apple iphone

Question

Я хочу изменить некоторые свойства CSS только в устройствах Apple iphone. Есть ли способ найти применение iphone в одиночку.

Для всех deives

.menu{ 
    -webkit-transition:all 100ms ease; 
    -moz-transition:all 100ms ease; 
    -o-transition:all 100ms ease; 
    transition: all 100ms ease; 
} 

Только для Apple Iphone

.menu{ 
    transition: none; 
} 

Answer 1

Там вы идете:

Просто добавьте те CSS @media запросов

/* ----------- iPhone 4 and 4S ----------- */ 
 

 
/* Portrait and Landscape */ 
 
@media only screen 
 
    and (min-device-width: 320px) 
 
    and (max-device-width: 480px) 
 
    and (-webkit-min-device-pixel-ratio: 2) { 
 

 
} 
 

 
/* Portrait */ 
 
@media only screen 
 
    and (min-device-width: 320px) 
 
    and (max-device-width: 480px) 
 
    and (-webkit-min-device-pixel-ratio: 2) 
 
    and (orientation: portrait) { 
 
} 
 

 
/* Landscape */ 
 
@media only screen 
 
    and (min-device-width: 320px) 
 
    and (max-device-width: 480px) 
 
    and (-webkit-min-device-pixel-ratio: 2) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* ----------- iPhone 5 and 5S ----------- */ 
 

 
/* Portrait and Landscape */ 
 
@media only screen 
 
    and (min-device-width: 320px) 
 
    and (max-device-width: 568px) 
 
    and (-webkit-min-device-pixel-ratio: 2) { 
 

 
} 
 

 
/* Portrait */ 
 
@media only screen 
 
    and (min-device-width: 320px) 
 
    and (max-device-width: 568px) 
 
    and (-webkit-min-device-pixel-ratio: 2) 
 
    and (orientation: portrait) { 
 
} 
 

 
/* Landscape */ 
 
@media only screen 
 
    and (min-device-width: 320px) 
 
    and (max-device-width: 568px) 
 
    and (-webkit-min-device-pixel-ratio: 2) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* ----------- iPhone 6 ----------- */ 
 

 
/* Portrait and Landscape */ 
 
@media only screen 
 
    and (min-device-width: 375px) 
 
    and (max-device-width: 667px) 
 
    and (-webkit-min-device-pixel-ratio: 2) { 
 

 
} 
 

 
/* Portrait */ 
 
@media only screen 
 
    and (min-device-width: 375px) 
 
    and (max-device-width: 667px) 
 
    and (-webkit-min-device-pixel-ratio: 2) 
 
    and (orientation: portrait) { 
 

 
} 
 

 
/* Landscape */ 
 
@media only screen 
 
    and (min-device-width: 375px) 
 
    and (max-device-width: 667px) 
 
    and (-webkit-min-device-pixel-ratio: 2) 
 
    and (orientation: landscape) { 
 

 
} 
 

 
/* ----------- iPhone 6+ ----------- */ 
 

 
/* Portrait and Landscape */ 
 
@media only screen 
 
    and (min-device-width: 414px) 
 
    and (max-device-width: 736px) 
 
    and (-webkit-min-device-pixel-ratio: 3) { 
 

 
} 
 

 
/* Portrait */ 
 
@media only screen 
 
    and (min-device-width: 414px) 
 
    and (max-device-width: 736px) 
 
    and (-webkit-min-device-pixel-ratio: 3) 
 
    and (orientation: portrait) { 
 

 
} 
 

 
/* Landscape */ 
 
@media only screen 
 
    and (min-device-width: 414px) 
 
    and (max-device-width: 736px) 
 
    and (-webkit-min-device-pixel-ratio: 3) 
 
    and (orientation: landscape) { 
 

 
}

Media Queries for Standard Devices - CSS Tricks Взятые из

И если вы заинтересованы в JS запроса, используйте:

if(/iPhone/i.test(navigator.userAgent)) { 
document.querySelector('html').classList.add('iphone'); 
} 

Затем добавьте .iphone .menu {} правило в файл CSS.

Answer 2

Попробуйте

if(navigator.userAgent.match(/iPhone/)) { 
 
    $('html').addClass('iphone'); 
 
}

.menu { 
 
    background:#8BC34A; 
 
    width:100px; 
 
    height:100px; 
 
    -webkit-transition:all 0.3s ease; 
 
    -moz-transition:all 0.3s ease; 
 
    -o-transition:all 0.3s ease; 
 
    transition: all 0.3s ease; 
 
} 
 
.menu:hover { 
 
    background:#9C27B0; 
 
} 
 
.iphone .menu{ 
 
    transition: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 

 
<div class="menu"></div>