Pesquisa multimédia do CSS apenas para o iPad e o iPad?

Estou a trabalhar com vários dispositivos tablet, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad e assim por diante.

  • iPad-1024 x 768
  • LG Pad-1280 x 768
  • Galaxy Tab-1280 x 800

quero atingir o iPad apenas com a pesquisa multimédia CSS3. Uma vez que, a largura do dispositivo de LG e iPad é o mesmo 768px - estou tendo problemas para separar cada dispositivo.

tentei separar-me, mas não parece estar a funcionar. 

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */
@media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */
@media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */
Não sei. - webkit-device-pixel-ratio and other-webkit * options and their values to target for iPad. Não quero usar JavaScript para estilos, alguma ideia?

Author: BoltClock, 2011-11-25
Source

5 answers

Finalmente encontrei uma solução de: detectar diferentes plataformas de dispositivos usando CSS

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

Para reduzir a chamada HTTP, isto também pode ser usado dentro do seu ficheiro comum CSS: 

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; } /* your css rules for ipad portrait */
}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}
Espero que isto ajude.

Outras referências:

 116
Author: Hossain Khan, 2017-06-30 17:23:24

Estou um pouco atrasado para responder a isto, mas nenhum dos acima funcionou para mim.

Isto foi o que funcionou para mim. 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    //your styles here
   }
 4
Author: Baig, 2015-06-11 09:13:49

Bem, a mesma pergunta e também há uma resposta=)

Http://css-tricks.com/forums/discussion/12708/target-ipad-ipad-only./p1

@media only screen and (device-width: 768px) ...
@media only screen and (max-device-width: 1024px) ...

Não posso testá-lo de momento, por isso, por favor, testá-lo=)

Também encontrei mais:

Http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

Ou você verifica o navegador com algum javascript e gera / adiciona um ficheiro css com javascript

 2
Author: Daniel Ruf, 2011-11-25 16:19:14

Você precisa de atingir o dispositivo pelo seu agente de Utilizador, usando algum script. O agente de utilizador do iPad é: 

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
 2
Author: Beatriz Oliveira, 2011-11-25 17:43:06 
<html>
<head>
    <title>orientation and device detection in css3</title>

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />

</head>
<body>
    <div id="iphonelandscape">iphone landscape</div>
    <div id="iphoneportrait">iphone portrait</div>
    <div id="ipadlandscape">ipad landscape</div>
    <div id="ipadportrait">ipad portrait</div>
    <div id="htcdesirelandscape">htc desire landscape</div>
    <div id="htcdesireportrait">htc desire portrait</div>
    <div id="desktop">desktop</div>
    <script type="text/javascript">
        function res() { document.write(screen.width + ', ' + screen.height); }
        res();
    </script>
</body>
</html>
 1
Author: Daniel Raja Singh, 2014-12-18 09:31:19