Php 某些设备上的图像显示会发生变化

Php 某些设备上的图像显示会发生变化,php,css,image,mobile,Php,Css,Image,Mobile,我正在开发我的移动应用程序。它有一个名为“应用下载”的链接,只能在ios和android上看到 现在在我的iPad上查看时,应用程序图像看起来不错,但在我的galaxy s3上查看时,应用程序图像看起来不好。它既有弹性又薄 该页面将按以下代码显示图像: <img src="<?php echo $article['app_img']; ?>" class="appimg" border="0" border="0" align="left" .appimg {border-ra

我正在开发我的移动应用程序。它有一个名为“应用下载”的链接,只能在ios和android上看到

现在在我的iPad上查看时,应用程序图像看起来不错,但在我的galaxy s3上查看时,应用程序图像看起来不好。它既有弹性又薄

该页面将按以下代码显示图像:

<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; }
“class=“appimg”border=“0”border=“0”align=“left”
.appimg{边界半径:30px;
-moz边界半径:30px;
-webkit边界半径:30px;
宽度:150px;
高度:150像素;
位置:相对位置;
背景色:透明;}
但是浏览器显示的明显不同

有人能为我提供一个解决方案吗

此处提供的屏幕截图:

以上三个视图都显示相同的代码,但在android上分别显示图像


请帮忙,谢谢。

即使我在xclo.mobi上也遇到了同样的问题

然后我把网站变成动态的,我的css是基于当前设备的动态的

因此,尝试获取当前设备并相应地在客户端浏览器上加载css内容

逻辑:如果当前设备==ipad加载css{width:150px}

这是因为浏览器和设备的分辨率

我希望下面的代码将帮助你更多

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

使用此代码对其进行排序

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

请1up谢谢。

看,这有点复杂。你能举个例子吗?有很多设备我不需要测试。是否只有一个if android然后查看此代码?我的问题是。因为这是一个web应用程序,它只会显示在所有ios和android上。让它适合所有其他设备似乎很愚蠢,是的,还有另一个同样,通过js检测浏览器的宽度和高度,然后相应地更改。请检查我的答案,并向上一个。这解决了我的问题。