I need to make a css change only on iOS, I've used
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {}
But it did not work.
The code I need to change is this one.
.sdn-music-player>.yt-wrap>iframe {
left: -22px;
position: absolute;
top: -126px;
Does anyone know of any way to make this work?
I use this code to detect, it uses the navigator.userAgent and it works cool. The code is not my own and unfortunately I no longer have the reference where I found the code at the time. follow the jsfiddle , I tested it on Iphone 4 with iOS 7
function isIOS()
{
var ua = navigator.userAgent.toLowerCase();
//Lista de dispositivos que acessar
var iosArray = ['iphone', 'ipod'];
var isApple = false;
//valida seu array
iosArray.forEach(function(item){
if (ua.indexOf(iosArray[item]) != -1)
{
isApple = true;
}
});
return isApple;
}
if(isIOS())
{
$('seu seletor').css({
'left': '-22px',
'position': 'absolute',
'top': '-126px'
});
}
I have tested this cod in some browsers. and apparently works like a hack for safari in general.
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, "seuseletor" {
attr: valor;
}
}
Eg:
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, h1 {
color: red;
}
}
This will make the h1 elements look red.
In your case:
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .sdn-music-player>.yt-wrap>iframe {
left: -22px;
position: absolute;
top: -126px;
}
}
Now if you need only a specific screen size you can associate one more condition with @media query .
Ex:
@media only screen and (-webkit-min-device-pixel-ratio: 1) and (min-width: 700px) { }
You can see more examples of Mquery here.