3

Preciso fazer uma alteração de um css apenas no iOS, utilizei o

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {} Porém não deu resultado.

O código que preciso alterar é esse. .sdn-music-player>.yt-wrap>iframe { left: -22px; position: absolute; top: -126px;

Alguém sabe alguma maneira para fazer isso funcionar?

3 Respostas 3

0

Eu uso esse código para detectar, ele usa o navigator.userAgent e funciona legal. O código não é de minha autoria e infelizmente não tenho mais a referencia de onde encontrei o código na época. segue o jsfiddle, testei no Iphone 4 com 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'
    });
}
0

Testei em alguns navegadores esse cod. e aparentemente funciona como um hack para safari em geral.

@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;
    }
}

Isso fará com que os elementos h1 fiquem com coloração vermelha.

no seu caso:

@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;
    }
}

Agora se tu precisar apenas pra um tamanho especifico de tela você pode associar mais uma condição para a @media query.

Ex.:

@media only screen and (-webkit-min-device-pixel-ratio: 1) and (min-width: 700px) { }

você pode ver mais exemplos de Mquery aqui.

1
  • Esse não seria o caso para usar as @media querys Commented 28/08/2015 às 14:28
-3

Consegui fazer funcionar no wordpress da forma abaixo:

                <script type="text/javascript">
                    var jQuery_3_6_0 = $.noConflict(true);
                </script>
                <script>
                    jQuery_3_6_0();
                    (function($) {
                        function isIOS() {
                            var ua = navigator.userAgent.toLowerCase();
                            var iosArray = ['iphone', 'ipod'];
                            var isApple = false;
                            iosArray.forEach(function(item) {
                                if (ua.indexOf(item) != -1) {
                                    isApple = true;
                                }
                            });
                            return isApple;
                        }

                        jQuery_3_6_0(document).ready(function() {
                            if (isIOS()) {
                                jQuery_3_6_0('.rowData').css({
                                    'display': 'none'
                                });
                            }
                        });
                    })(jQuery_3_6_0);
                </script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .