Image display alters on some devices

Question

I'm working on my mobile app located here . Which has a link called "APP DOWNLOADS" which can only be seen on ios and android.

Now when viewing this page on my iPad the app image looks ok but when viewing this page on my galaxy s3, the app image does not look good. It is all stretch and thin.

The page is displaying the images by this 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; }

But the browsers are obviously displaying different.

Can someone please provide me with a solution for this?

Screenshots available here:

iPad iPhone Android

All 3 of the above view the same code but display the image separately on the android.

Please help thanks.

Answer 1

Even I had faced same problem not on xclo.mobi though.

And then I made the site dynamic , my css was dynamic based upon the current device.

So try to get current device and load css content on client browser accordingly.

Logic : if current device == ipad load css {width:150px}

It's because of browser and resolution of the device.

I hope below code will help you more.

 <?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 help you

Answer 2

Sorted it using this 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;
}
}

Please 1up thanks.