Вопрос по php, jquery, javascript – Как получить разрешение экрана посетителя в javascript и / или php?

3

Я хотел бы знать разрешение экрана посетителя, посещающего мою страницу, чтобы я мог правильно сделать jquery Thickbox на 75% их экрана.

Решения вопроса или помочь мне решить мою проблему очень ценятся!

Воспользуйтесь предложением NickFitz's (stackoverflow.com/questions/1091540/…). JavaScript не нужен для этого. Gumbo
Принятый ответ не отвечает на вопрос, хотя и помогает спрашивающему. Ниже приведены актуальные ответы на этот вопрос. Brian Webster
Не всем нужны размеры окна. Причина не в изменении макета, а в изменении некоторых элементов, таких как размер шрифта. Если я знаю, что клиент использует разрешение 1024x768, то независимо от размера их окна я хочу установить размер шрифта немного ниже, чем тот, который установлен для разрешения 1920x1200. user478572

Ваш Ответ

6   ответов
1

после всей проделанной работы над предметом я улучшу свой ответ ..

Сначала некоторые выводы, которые были получены с большим трудом:

[No cookies.. forget it] Don't do anything like setting session variables on serverside. Otherwise evrey time your page loads a new session file will be created on serverside (file is the usual handler for sessions) and the directory will pile up with files and you still wont be able to track the session.If you find a way, we all will be happy to hear it.

[No cookies.. forget fancy scripts!] Without cookies you might have some success, like with the method of tracking ip etc, but still errors are there and there will be a circumstance where it will appear.

[No cookies.. go for no cookies] If you can have your pages work without cookie go for it otherwise is not worth.

Что касается разрешения экрана, мой скрипт ниже может сделать это:

Immediately display info for all 4 combinations cookie and js enabled. If the user makes a change enabling-disabling js or cookie these changes are identified immediately by the script. I used chrome plus and any change I did, in any combination was immediately identified. It worked even without deleting old cookies.

Это мой сценарий, он включает в себя функцию dbg () только для отладки, я пытался сделать его без ошибок, однако проверить себя!

<?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&qu,ot;;

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

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




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






?> 

После идентификации экрана вы можете перейти к внешнему виду, как это:

В вашем файле view.htm (что угодно) включите такой стиль:

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

тогда ваш style.php может быть таким:

<?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.

Просто мой путь, это не обязательно хорошо!

2

и он говорит со всеми браузерами, так. (включая тупой IE6)

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;
37

В JavaScript это:

screen.width
screen.height

Но у PHP нет доступа к клиенту. Поэтому вам нужно передать значения, собранные JavaScript, в ваш PHP-скрипт.

Кроме того, не каждый пользователь имеет свои окна в полноэкранном режиме. Так что вам лучше использоватьдоступная ширина / высота окна.

+1 за упоминание правильного метода: размеры окна
7

что у людей всегда окно браузера максимально увеличено до размера экрана? Я не такой, и я не единственный.

Вы хотите покрыть 75% ихwindow, Это можно сделать с помощью CSS; если рассматриваемый элемент является дочерним элементом элемента body, то

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

вероятно, сделаю это (хотя я не проверял это, хотя).

РЕДАКТИРОВАТЬ: я сейчас проверил это, добавив

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

и это работало, как и ожидалось, по крайней мере, в Firefox 3.5 :-)

Это здорово, у меня тоже получилось.
0
24

есть кросс-браузерное решение для получения размера окна браузера:

var browserWidth = $(window).width();
var browserHeight = $(window).height();
FWIW: проверено в IE6, Opera и Chrome. Хороший краткий ответ.

Похожие вопросы