Skip to content

Instantly share code, notes, and snippets.

@paulodiovani
Forked from manfromanotherland/viewport-size.js
Last active August 29, 2015 14:02
Show Gist options
  • Save paulodiovani/0d48d8b7b2556c34aabd to your computer and use it in GitHub Desktop.
Save paulodiovani/0d48d8b7b2556c34aabd to your computer and use it in GitHub Desktop.
Script para exibir tamanho do viewport. Fontes em CoffeeScript, Javascript gerado e Javascript minificado (para usar num botão de atalho)
id = "viewport-size-by-edmundojr-paulodiovani"
# Cria o elemento do viewport, se ainda não existir
create = ->
div = document.getElementById(id) || document.createElement "div"
div.id = id
div.style.cssText = """
position:fixed; \
top:0; \
right:0; \
padding:0 .5em; \
color:#333; \
background:rgba(255,255,255,.75); \
font:14px/1.8em Monaco, Inconsolata, Ubuntu Mono, Courier New, monospaced;
z-index:9999;
"""
div.innerText = div.textContent = get_dimensions()
document.body.appendChild div
return
# obtém as dimensões do viewport
get_dimensions = ->
window.innerWidth + 'x' + window.innerHeight
# atualiza o texto das dimensões no elemento
resize = ->
div = document.getElementById(id)
div.innerText = div.textContent = get_dimensions()
# adiciona como evento ao resize da window
window.onresize = resize
create()
// Generated by CoffeeScript 1.7.1
(function() {
var create, get_dimensions, id, resize;
id = "viewport-size-by-edmundojr-paulodiovani";
create = function() {
var div;
div = document.getElementById(id) || document.createElement("div");
div.id = id;
div.style.cssText = "position:fixed; top:0; right:0; padding:0 .5em; color:#333; background:rgba(255,255,255,.75); font:14px/1.8em Monaco, Inconsolata, Ubuntu Mono, Courier New, monospaced;\nz-index:9999;";
div.innerText = div.textContent = get_dimensions();
document.body.appendChild(div);
};
get_dimensions = function() {
return window.innerWidth + 'x' + window.innerHeight;
};
resize = function() {
var div;
div = document.getElementById(id);
return div.innerText = div.textContent = get_dimensions();
};
window.onresize = resize;
create();
}).call(this);
(function(){var create,get_dimensions,id,resize;id="viewport-size-by-edmundojr-paulodiovani";create=function(){var div;div=document.getElementById(id)||document.createElement("div");div.id=id;div.style.cssText="position:fixed; top:0; right:0; padding:0 .5em; color:#333; background:rgba(255,255,255,.75); font:14px/1.8em Monaco, Inconsolata, Ubuntu Mono, Courier New, monospaced;\nz-index:9999;";div.innerText=div.textContent=get_dimensions();document.body.appendChild(div)};get_dimensions=function(){return window.innerWidth+'x'+window.innerHeight};resize=function(){var div;div=document.getElementById(id);return div.innerText=div.textContent=get_dimensions()};window.onresize=resize;create()}).call(this);
@paulodiovani
Copy link
Author

Para criar um bookmarklet:

  1. Cria um novo atalho
  2. Coloque "Viewport Size" no nome (ou oq ue preferir)
  3. Coloque javascript: no endereço, e cole o código de viewport.min.js a seguir
  4. Clique em "Salvar"

@manfromanotherland
Copy link

Troca o position:absolute para position:fixed e adiciona z-index:9999;.

@paulodiovani
Copy link
Author

Trocado.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment