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.
robrodpProgrammerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Exploring ASP.NET Core: Fundamentals

Learn to build web apps and services, IoT apps, and mobile backends by covering the fundamentals of ASP.NET Core and  exploring the core foundations for app libraries.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
robrodpProgrammerAuthor Commented:
Have to work on it... but I amsure it will do the trick
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.