Css change in iOS only

Question

I need to make a css change on iOS only, I used

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {} But it didn’t work.

The code I need to change is this. .sdn-music-player>.yt-wrap>iframe { left: -22px; position: absolute; top: -126px;

Does anyone know any way to make it work?

Answer 1

I tested on some browsers this Cod. and apparently works as a hack for safari in general.

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
    ::i-block-chrome, "seuseletor" {
        attr: valor;
    }
}

Ex.:

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
    ::i-block-chrome, h1 {
        color: red;
    }
}

This will make the elements h1 turn 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 only need for a specific screen size you can associate one more condition to the @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.

Answer 2

I use this code to detect, it uses the Navigator.useragent and it works well. The code is not my own and unfortunately I no longer have the reference to where I found the code at the time. follows the jsfiddle, tested in the 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'
    });
}