Php site. Screen resolution

How can I determine the resolution of the device where my site is being visited to establish the image size?

I dont need the site to be responsive.
robrodpAsked:
Who is Participating?
 
Ray PaseurCommented:
I need to choose the large image for the largex.php and the small one for the smallx.php
Maybe not.  Have you thought about a design like this?
http://iconoun.com/demo/grumpycat.html

Try adjusting the viewport to see what happens.  You can see all of the code with "view source."
0
 
F PCommented:
Use @media queries in your CSS.

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Example

Change the background-color if the document is smaller than 300 pixels wide:

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}
0
 
F PCommented:
Rule of thumb, is that a mobile device is typically 360px or more. If you want an image to fit in the viewport, start with that size as your min-width (providing you don't have padding or margins).
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
Ray PaseurCommented:
Just a thought... Maybe learn about Twitter Bootstrap.  It's very popular now, for a reason!  This is a whole different strategy - you don't need to try to figure out or guess how to outsmart your client browser -- you just work with it to create a good client experience.
0
 
F PCommented:
Ray's correct. It's a great learning tool and crutch if you're unfamiliar with CSS and don't want to learn SASS or LESS. Once you get more experience, I would recommend either steering away from it or learning to modify your CSS so it isn't so bloated with things you won't ever use.
0
 
robrodpAuthor Commented:
Thx...

I am including the main code of 2 php pages they have a regular style and a responsive style.

I need to choose the large image for the largex.php and the small one for the smallx.php

http://lapalabramx.com/smallx.php when detecting a mobile (or a very small screen resolution)

http://lapalabramx.com/largex.php when detecting otherwise


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/interior.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<title>Small</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<link href="responsive.css" rel="stylesheet" type="text/css" />
</head>

<body topmargin="0" leftmargin="0" rightmargin="0"><a name="arriba" id="arriba"></a>

<div id="centro"><!-- InstanceBeginEditable name="EditRegion3" -->
  <div id="central">
 <div class="textoCentral"><img src="small.jpg" alt="Tachando Opciones" width="293" height="198" class="ImagInterior" /><br /></div>
</body>

Open in new window


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/interior.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<title>Large</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
<link href="responsive.css" rel="stylesheet" type="text/css" />
</head>

<body topmargin="0" leftmargin="0" rightmargin="0"><a name="arriba" id="arriba"></a>

<div id="centro"><!-- InstanceBeginEditable name="EditRegion3" -->
  <div id="central">
 <div class="textoCentral"><img src="large.jpg" alt="Tachando Opciones" width="602" height="384" class="ImagInterior" /><br /></div>
</body>

Open in new window

0
 
robrodpAuthor Commented:
Have to work on it... but I amsure it will do the trick
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.