JavaScript – Pegar Resolução do Segundo Monitor

Esses dias tive necessidade de fazer um desenvolvimento para detectar a resolução do monitor do usuário e realizar algumas customizações na tela.

Teoricamente uma tarefa super simples, porém nem tudo que parece é …  pro meu azar nesse caso …. via javascript você só consegue pegar a resolução do monitor principal então quando o usuário usa o modo estendido de monitor, não é possível pegar a resolução do monitor secundário com screen.width e screen.height … ainda tentei pesquisar chorar mas não tem jeito … com js não é possível hoje  “2012”…

Depois de pensar um pouco comecei a bolar uma solução alternativa … embora ele não me retorne a resolução ele me retorna a posição correta dos elementos =) … logo a solução foi ..

Via js crio uma div e posiciono a mesma no canto direito inferior , usando position:fixed com bottom: 0px e right:0px , depois via js eu pego a posição real top e left.

Isso me da areá total visível da pagina  o que é menor que a resolução, mas o necessário para minha customização.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml” &gt;
<head>
    <title>Untitled Page</title>
</head>
<body>
<div style=”width:auto;height:auto;background-color:red;”>
teste
</div>

<script language=”javascript” type=”text/javascript”>

    try {

    var divResolucao = document.createElement(“div”);

    document.body.appendChild(divResolucao);

    divResolucao.setAttribute(“style”, “position:fixed;bottom: 0px; right:0px;width: 10px;
height:10px;background-color:red”);

    alert(divResolucao.offsetLeft + ‘ – ‘ + divResolucao.offsetTop);

} catch (e) {

alert(e);
}

</script>

</body>
</html>

Anúncios