Pregunta sobre php, javascript, jquery – ¿Cómo obtener la resolución de pantalla del visitante en javascript y / o php?

3

Me gustaría saber la resolución de la pantalla de un visitante que visita mi página para poder hacer una cubierta de caja de jQuery adecuada para aproximadamente el 75% de su pantalla.

¡Las soluciones a la pregunta o ayudarme a resolver mi problema son muy apreciadas!

No todos quieren las dimensiones de la ventana. El motivo no es cambiar el diseño, sino cambiar ciertos elementos, como el tamaño de fuente. Si sé que el cliente está utilizando una resolución de 1024x768, independientemente del tamaño de la ventana, quiero establecer el tamaño de fuente un poco más bajo que el establecido para una resolución de 1920x1200. user478572
La respuesta aceptada no responde a la pregunta, aunque ayuda al autor de la pregunta. Hay respuestas reales altamente actualizadas a la pregunta a continuación. Brian Webster
Utilice la sugerencia de NickFitz (stackoverflow.com/questions/1091540/…). JavaScript no es necesario para eso. Gumbo

Tu respuesta

6   la respuesta
37

En JavaScript es:

screen.width
screen.height

Pero PHP no tiene acceso al cliente. Por lo tanto, debe pasar los valores recopilados por JavaScript a su script PHP.

Además, no todos los usuarios tienen sus ventanas en modo de pantalla completa. Así que deberías usar mejor elancho / altura de la ventana disponible.

+1 por mencionar el método correcto: dimensiones de la ventana bandi
1

espuesta.

Primero algunas conclusiones que se han ganado con mucho esfuerzo:

[Sin cookies ... olvídalo] No hagas nada como configurar variables de sesión en el servidor. De lo contrario, se creará un nuevo archivo de sesión en el lado del servidor (el archivo es el controlador habitual de las sesiones) y el directorio se llenará de archivos y aún no podrá seguir la sesión. Si encuentra la forma, Todos estarán felices de escucharlo.

[¡Sin cookies ... olvide los scripts de fantasía!] Sin las cookies, podría tener cierto éxito, como con el método de rastreo de ip, etc., pero todavía hay errores y habrá una circunstancia en la que aparecerá.

[Sin cookies ... ir por no cookies] Si puede hacer que sus páginas funcionen sin cookies, de lo contrario no vale la pena.

En cuanto a la resolución de pantalla, mi script a continuación puede hacer lo siguiente:

Inmediatamente muestra información para las 4 combinaciones de cookies y js habilitados.Si el usuario realiza un cambio habilitando-deshabilitando js o cookie, estos cambios son identificados inmediatamente por el script.Usé Chrome Plus y cualquier cambio que hice, en cualquier combinación se identificó de inmediato. Funcionó incluso sin borrar las cookies antiguas.

Este es mi script, incluye una función dbg () solo para la depuración, ¡he intentado dejarlo libre de errores, sin embargo, pruebe para usted mismo!

<?PHP




class prereqCls
{

   //change this
  private $self="http://localhost/prereq.php";
  private $jsCookie="";

  function __construct()
  {     


    //entering conditions, an autosubmit bttn fetches the rest fields not it self 
    $enter=false;
    if(isset($_GET['rl']))$enter=true;
    if(!isset($_POST['js_alive']) and !isset($_POST['noJsBttn']))$enter=true;


    if($enter)
    {
      dbg("Now writing a php cookie..","construct");
      setcookie('cookie_alive',1,time()+3600);//set it for 1 hour 
      dbg("Now calling Js..","construct");
      $this->getSettings();
      return;
    }



    //identify setting
    $this->identifySett();


    //display the appropriate link  
    if($this->jsCookie!=="")
              echo "<a href=".$this->self."?rl=1 >If you enebled {$this->jsCookie}, don't refresh 
                but click here to load the new settings!</a>";
    else
              echo "<a href=".$this->self."?rl=1 >Click only this to relaod the page..</a>"; 

    //display the cookie if set
    if(isset($_COOKIE['cookie_alive']))
    {
      echo "<br><br>Well this is the cookie!<br>";
      print_r($_COOKIE);
    }


  }//method



  private function identifySett()
  {
        if(isset($_POST['js_alive']) and isset($_COOKIE['cookie_alive']))
      dbg("Both js and cookies are enabled!","construct");

    elseif(isset($_POST['js_alive']) and !isset($_COOKIE['cookie_alive']))
      {dbg("Js is enabled cookies not!","construct"); $this->jsCookie="Cookies";}

    elseif(!isset($_POST['js_alive']) and isset($_COOKIE['cookie_alive']))
      {dbg("Js is not enabled, cookie is!","construct");  $this->jsCookie="Javascript";}

    elseif(!isset($_POST['js_alive']) and !isset($_COOKIE['cookie_alive']))
      {dbg("Js and cookies are not enabled!","construct"); $this->jsCookie="Javascript and Cookies";}

  }


//php method begins
private function getSettin,gs()
{
?>
<html>
<head>
<script type="text/javascript">

//the values entered to cookie by js will be seen by php immediately on reload!!! 
//write the screen data to the cookie too 
var exdays = 365; 
var exdate=new Date(); 
exdate.setDate(exdate.getDate() + exdays);

var c_value=escape(screen.width) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie="scr_width=" + c_value;

var c_value=escape(screen.height) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie="scr_height=" + c_value;


var c_value=escape(1) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie="js=" + c_value;

//autosubmit the form in milliseconds
window.setTimeout("document.getElementById('scrForm').submit();",0);


</script>


</head>

<body >

 <form id="scrForm" action="<?PHP echo $this->self;?>" method="post">   

<!--If Js is enabled the appropriate bttn will be shown-->
   <script type="text/javascript">
   document.write('<input type="hidden" name="js_alive" value="1">');
   document.write('<input type="submit" name="JsBttn" value="Go">');
   </script>

 <noscript>
 Some trouble trying to find screen settings.. Click to continue!
 <input type="submit" name="noJsBttn" value="Go">
 </noscript>

 </form>  

</body>
</html>

<?PHP

}
////////////////////php method ends

}/////////////class




//debuger
function dbg($str,$caller)
{ 

echo "<br> [{$str}][{$caller}]<br>";

$log="Log Begins:---".date('Y-M-d h:i:s')."--------[CALLER]{$caller}----------\n";

$log.= $str."\n";

$log.= "Log Ends:-------------------------------------------------------\n\n";

$fh=fopen("log_errors.log","a");
fwrite($fh, $log);
fclose($fh);
}
///////////////////// 




//make the class alive
$alive = new prereqCls();






?> 

Después de identificar la pantalla, puedes ir por una apariencia como esta:

En su archivo view.htm (lo que sea), incluya un estilo como este:

   <link rel="stylesheet" href="style.php" />

entonces tu style.php podría ser así:

<?php
    header("Content-type: text/css");

    $width  = $_COOKIE['scr_width']; 
    $height = $_COOKIE['scr_height']; 

element 1 width is let's say 0.2 of width
element 2 width is let's say 0.7 of width
big container (it could be a single cell table) width=all other elements width
or
if image height is>image width then this variable will be ...
or
image path is random
or image path dynamic
or ... etc etc endless possibilities, you can do anything here in this css stylesheet.
?>

then [still on the same file, Yes css and php together!] for example apply the variables,
only simple variables work down here, keep calculations for above.



#smImgZoom
{
width:<?PHP echo $zoomerImgWidth."px;";?> 
height:<?PHP echo $zoomerImgHeight."px;";?> 
    padding:10px ;
}  

etc etc this is how I do it so html remain clear, css clear, calculations separated.

A mi manera, no es necesario bueno!

2

res por igual. (incluyendo el IE6 tonto)

var width = document.body.offsetWidth;
var bodyHeight = document.body.scrollHeight;
var height = (typeof window.innerHeight !== "undefined")? window.innerHeight :  (document.documentElement)? document.documentElement.clientHeight : document.body.clientHeight;
    height = (bodyHeight > height)? bodyHeight : height;
24

existe una solución de navegador cruzado para obtener el tamaño de la ventana del navegador:

var browserWidth = $(window).width();
var browserHeight = $(window).height();
FWIW: Verificado en IE6, Opera y Chrome. Buena respuesta concisa. Bernhard Hofmann
7

egador maximizada al mismo tamaño que su pantalla? Yo no, y no soy el único.

Lo que quieres es cubrir el 75% de susventana. Esto se puede hacer usando CSS; Si el elemento en cuestión es un hijo del elemento body, entonces

#box {
    position: absolute;
    top: 12.5%;
    left: 12.5%;
    width: 75%;
    height: 75%;
}

Probablemente lo hará (aunque no lo he probado).

EDIT: ahora lo he probado, añadiendo

html, body {
    width: 100%;
    height: 100%;
}

y funcionó como se esperaba, al menos en Firefox 3.5 :-)

Esto es genial, trabajó para mí también. CodeVirtuoso

Preguntas relacionadas