L'affichage de l'image change sur certains appareils

Question

Je travaille sur mon application mobile located here. Qui a un lien appelé "APP DOWNLOADS" qui ne peut être vu sur iOS et Android.

Maintenant, en regardant this page sur mon iPad l'image de l'application semble correcte, mais lors de la visualisation this page sur ma galaxie s3, l'image de l'application ne semble pas bonne. Tout est extensible et mince.

La page affiche les images par ce code:

<img src="<?php echo $article['app_img']; ?>" class="appimg" border="0" border="0" align="left" 
.appimg {border-radius: 30px; 
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    width:150px;  
    height:150px; 
    position:relative; 
    background-color: transparent; } 

Mais les navigateurs sont évidemment différentes affiche.

Quelqu'un peut-il me fournir une solution pour cela?

Captures d'écran disponibles ici:

iPadiPhoneAndroid

Toutes les 3 de la vue au-dessus du même code, mais afficher l'image séparément sur l'androïde.

S'il vous plaît aider merci.

Answer 1

Triés en utilisant ce code

.appimg { 
border-radius: 30px; 
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    width:150px;  
    height:150px; 
    position:relative; 
    background-color: transparent; 
} 

@media only screen and (-webkit-device-pixel-ratio:.75){ 
.appimg { 
border-radius: 20px; 
    -moz-border-radius: 20px; 
    -webkit-border-radius: 20px; 
    width:150px;  
    height:350px; 
    position:relative; 
    background-color: transparent; 
} 
} 

S'il vous plaît 1up merci.

Answer 2

Même si j'avais rencontré le même problème pas sur xclo.mobi cependant.

Et puis j'ai rendu le site dynamique, mon css était dynamique basé sur le périphérique actuel.

Essayez donc d'obtenir le périphérique actuel et de charger le contenu CSS sur le navigateur client en conséquence.

Logique: si l'appareil actuel == iPad charger le fichier css {width: 150px}

Il est à cause de navigateur et de la résolution de l'appareil. J'espère que le code ci-dessous vous aidera plus.

<?php 


/* detect mobile device*/ 
$ismobile = 0; 
$container = $_SERVER['HTTP_USER_AGENT']; 

// A list of mobile devices change as you wish 
$useragents = array ( 

'Blazer' , 
'Palm' , 
'Handspring' , 
'Nokia' , 
'Kyocera', 
'Samsung' , 
'Motorola' , 
'Smartphone', 
'Windows CE' , 
'Blackberry' , 
'WAP' , 
'SonyEricsson', 
'PlayStation Portable', 
'LG', 
'MMP', 
'OPWV', 
'Symbian', 
'EPOC', 

); 

foreach ($useragents as $useragents) { 
if(strstr($container,$useragents)) { 
$ismobile = 1; 
} 
} 
//And then you can load your css 
//eg:== 
if($ismobile=1) 
echo '.appimg{width:250px;height:250px}';//Change for device as you want 
//After your php statements you can load your site content as usual 

Hope this vous aider