Get a different image from the database depending on screen size

I am starting to make a web app and the idea is that depending on the url it will be accessed from the load varying text and images from the data base. www.mitdomæne.dk/?id=1 0.2 0.3 etc up to 50 pieces.

The problem now is that I must have the dynamic content to switch itself off depending on the mobile or pad (screen size).

Can I get the php to pick what size screen and echo the correct picture out?

So if it's an iphone that looks at the side the image that is 320px wide a loaded and if it is a ipad is 1024px wide.

I have created a date base of MySQL with these fields.

ID: company: Billed_fil

And the code looks like this.

html:

 <div data-role="page" id="side1">
   <div data-role="header" data-nobackbtn="true"> </ div>
   <div data-role="content">
     <p class="brod"> <? php echo $ company?> </ p>
 <div id="billede"> <img src = "<? php echo $ billed_fil?>" alt = "" border = "0" /> </ div>
   </ div>
   <div data-role="footer"> &开发者_运维问答lt;/ div>
 </ div>

PHP:

 <? php

 include 'firmaer_db_cnx.inc.php';

 $ id = $ _GET ['id'];
     $ sql = mysql_query ("SELECT * FROM info_int WHERE id = '$ id'");

     $ company list = mysql_fetch_array ($ sql);

     $ id = $ company list ['id'];
     $ company = $ company list ['company'];
     $ billed_fil = $ company list ['billed_fil'];

 ?>

Sql version 5.1.53 PHP version 5.3.4

Is it possible?

//Kasper

There might be an even easier way to do this using just CSS. Take a look at this demo:

http://www.alistapart.com/d/responsive-web-design/ex/ex-site-larger.html Hint: Resize your browser window.

And here is the Article explaining how to do it. Also some more background info.

only possible way to get screen size is through javascript or some fimiliar fronend programming language, you could either use an ajax call, save it to a cookie and then read it with php, or u could be a little smarter then that and save the image with the same name with one diffrence the ending... which would be the resolution, for example iamge1024x123.png and then use javascript onload to add the proper image depending on resolution. then u save unneccersary calls to the database and would get a little performance boost while u'r at it. I hope you understood my idea and it was for somehelp

PHP runs on the server before it is given to the client browser so it has no idea about the screen size the client browser is running on. One way you could possibly do this is via JavaScript to retrieve the screensize and pass those values to PHP (via an AJAX call?). Of course, other SO people will come up with other ideas (probably better than mine) so it's your choice how you do it.

just store the image outside of the database do something like this

<script language="JavaScript" type="text/javascript">
if(screen.width==800 && screen.height==600){
document.images['id'].src='<? php echo $ billed_fil?>-800x600.gif';
}
else if(screen.width==1024 && screen.height==768){
document.images['id'].src='<? php echo $ billed_fil?>-1024x768.gif';
}
else{
document.images['id'].src='<? php echo $ billed_fil?>-default.gif'; 
}
</script>