Question

Dear all expert i had a problem for comparing my string from document.write with a php’s string and when i use var_dump(variable) i see that the string is not the same even though echo value is the same, any know about to make it work?

$resolution_width = "<script type='text/javascript'> document.write(window.screen.width); </script>";

$resolution_height = "<script type='text/javascript'>document.write('#'+window.screen.height+'#'); </script>";  


$screen_width=$resolution_width; 
$screen_height=str_replace("#","",$resolution_height); 

echo var_dump($screen_width);
$str='1280';
echo "<BR>";
echo "<BR>".var_dump($str);

if($screen_width=='1440'){
    $width=1440;
    echo $width;
}
elseif($screen_width=='1360'){
    $width=1360;
    echo $width;

}
elseif($screen_width=='1280'){
    $width=1280;
    echo $width;

}
elseif($screen_width=='1152'){
    $width=1152;
    echo $width;
}
elseif($screen_width=='1024'){
    $width=1024;
    echo $width;
}
elseif($screen_width=='800'){
    $width=800;
    echo $width;
}

This is my result when i try to output it, as it false every comparison.
I think this string is the same but it maybe different conversion.

My result :

string(78) "1280"
string(4) "1280"

Answer 1

The code inside the <script> tags won’t run until it is in the web browser. The php generates a document to send to the web browser. Then the web browser runs the javascript.

There is no way to figure out the screen width in the php code. However you can use javascript and css to modify the page layout based on the screen width after the page has loaded.

If you are trying to format your page, based on the screen width, then I would recommend using Twitter Bootstrap. Handling all the different screen sizes can get hairy. There are a lot of browser compatibility problems and other complications that aren’t obvious at first. The people at Twitter have already solved them and shared this framework so that you don’t have to repeat the work.

If you don’t want to use the Bootstrap framework, then look at using CSS Media Queries.

If you need to send the browser width to your server for a different reason, then ajax would be a good way to do that. You will have to have two php scripts. One that generates the page, and one that handles the ajax request. If you are using jQuery then you can write the ajax request like this:

$( function() {
    $.get( 'script_that_will_proccess_ajax.php', { width: window.screen.width, height: window.screen.height } )
    .success{ function {
        alert( 'it worked' );
     } );
} );

See the documentation for jQuery get and jQuery post