load php page according to screen size

[microbert]

Hi,

 

I am trying to make a page where the footer is loaded according to the screen size, so if someone is accessing the website via a tablet will be a footer, if it is from the computer, there will be another footer.

 

my problem is that although it is recognizing the windows width, it is not changing the footer accordingly.

 

this is my code:

$width = "<script>document.write(window.innerWidth);</script>";
if ($width < 900)
{
include("footer_mobile.php");
}
else
{
include("footer.php");
}

for some reason it is always loading the else footer even though the windows with changes.

I added echo"$width" ; and the result of the variable was fine.

 

 

does anyone know what the problem is cause it is driving me crazy?

 

[Ch0cu3r]

PHP is not the solution. Look at using CSS media quries to display different parts of your web page depending on the device being used.

 

This technique is called Responsive Web Design goggling that term will yeild may articles/tutorials. Such as this page was found

Edited September 2, 2014 by Ch0cu3r

[microbert]

Ok, i have tried to use @media but how can I include a php file depending on the screen size?

 

I have 2 files:

     1. footer.php

     2. footer_mobile.php

[CroNiX]

The only way would be to request the footer using AJAX after you get the width using JS. The php code on the server knows nothing about your javascript, which runs in the browser, AFTER php has stopped processing and sent the data to the browser.

[cyberRobot]

Instead of maintaining two separate footer files, have you considered creating one and adapting it using CSS media queries?

[microbert]

I think that the best solution is the css media, but I never used it and couldn't make it work.

does anyone has used this type of command before?

 

how to choose which part of the code you will show on the page?

[cyberRobot]

How are you testing to see if the media query(ies) work? Are you adjusting a browser window...or are you testing on a mobile device? If you're testing on a mobile device and it's an iPhone, you'll need to add a <meta> tag to get things working. Perhaps the following article will help:

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

 

If you scroll down a bit, there is a section for "Testing in an iPhone" which talks about the <meta> tag.

[microbert]

thank you all for your help, it worked fine. I used the css media functions and it worked perfect.