2012-04-30 17 views
18

Jeśli jesteś tutaj, aby powiedzieć mi, dlaczego zmiana rozmiaru okna to zły pomysł, nieznośny i internetowy odpowiednik gwoździ na tablicy kredy , więc proszę, odejdź. Szukam rozwiązania, a nie wykładu. Ta opcja ma być używana tylko w intranecie. Konkretnie, aby debugować, a następnie demonstrować responsywnie zaprojektowane strony internetowe (witryny, które używają zapytań o media w celu skalowania) do klientów w celu ich przejrzenia za pośrednictwem spotkania internetowego. Chcę demonstrować określone punkty przerwania. Nie należy tego ujawniać ogółowi społeczeństwa.Jak zmienić rozmiar okna przeglądarki, aby wewnętrzna szerokość była określoną wartością?

Co już wiem:

  1. Można jedynie zmienić rozmiar i położenie okna otwierane za pośrednictwem javascript, nie przez użytkownika. (o ile nie dostosowują swoich ustawień zabezpieczeń, co nie jest możliwe)
  2. Podczas korzystania z metody resizeTo() okna, przeglądarka zmienia rozmiar na określone wymiary. Rzut jest często znacznie mniejszy (na przykład o 30 do 100 pikseli mniejszy). Jednak chcę zmienić rozmiar rzutni do określonego rozmiaru.
  3. Przeglądarka, wersja przeglądarki, platforma, niektóre wtyczki oraz różne paski menu i narzędzi zmienią wymiary rzutni. Więcej menu i pasków narzędzi oznacza, że ​​szerokość okna jest mniejsza.

Możliwe rozwiązanie:

  1. Znajdź szerokość i wysokość w przeglądarce
  2. Znajdź szerokość rzutni i wysokość
  3. określić różnicę między nimi.
  4. Dostosuj wartości w moje wezwanie do resizeTo() odpowiednio

Potrzebuję pomocy z krokiem 1. Wszystko inne mogę rozszyfrowania. Używam również jQuery i modernizatora, jeśli to pomaga.

Z góry dziękuję za pomoc!

+1

http://www.quirksmode.org/dom/w3c_cssom.html – AlienWebguy

+0

Cóż, proszę bardzo. – mrbinky3000

+0

Tylko problem z krokiem 4 polega na upewnieniu się, że w przeglądarkach włączono ustawienie, aby otworzyć wyskakujące okienko w nowym oknie i że można go zmienić. – epascarello

Odpowiedz

17

Post jest dość stary, ale tutaj jest konkretna realizacja dla przyszłych czytelników:

var resizeViewPort = function(width, height) { 
    if (window.outerWidth) { 
     window.resizeTo(
      width + (window.outerWidth - window.innerWidth), 
      height + (window.outerHeight - window.innerHeight) 
     ); 
    } else { 
     window.resizeTo(500, 500); 
     window.resizeTo(
      width + (500 - document.body.offsetWidth), 
      height + (500 - document.body.offsetHeight) 
     ); 
    } 
}; 

A jeśli chcesz podjąć przewijania pod uwagę:

var resizeViewPort = function(width, height) { 
    var tmp = document.documentElement.style.overflow; 
    document.documentElement.style.overflow = "scroll"; 

    if (window.outerWidth) { 
     window.resizeTo(
      width + (window.outerWidth - document.documentElement.clientWidth), 
      height + (window.outerHeight - document.documentElement.clientHeight) 
     ); 
    } else { 
     window.resizeTo(500, 500); 
     window.resizeTo(
      width + (500 - document.documentElement.clientWidth), 
      height + (500 - document.documentElement.clientHeight) 
     ); 
    } 

    document.documentElement.style.overflow = tmp; 
}; 

Miłej zabawy ...

+2

Potwierdzone to działa z IE 11, FF i Chrome (wszystko na Windows) – mlhDev

+2

Doskonałe rozwiązanie, jednak użyłem go w zdarzeniu window.resize. Pierwszy nie działa dobrze w takim przypadku w co najmniej dwóch wersjach Safari: okno zmienia rozmiar i zmienia się kilka razy, dopóki nie osiągnie właściwego rozmiaru, albo utknie w pętli zmiany rozmiaru. Co rozwiązało to dla mnie oblicza 'window.outerWidth - window.innerWidth' raz, gdy DOM został załadowany i używa tych wartości za każdym razem, zamiast obliczać je przy każdej zmianie rozmiaru. Zrobiłem to samo dla wzrostu. – toon81

Powiązane problemy