Cześć. Tworzę dość duży projekt i natknąłem się na pewne ograniczenie. Pokrótce. Tworzę stronę w PHP, która będzie edytorem. Edytor generuje stronę, która będzie wyświetlana na tablecie o danej rozdzielczości poprzez specjalny program (również będzie automatycznie odświeżana). Docelowo będą różne rozdzielczości począwszy od 1024x768 aż do 1920x1080 (każdy ekran będzie miał w bazie zapisaną rozdzielczość). Myślałem, by rozmiar okna edytora (edytora a'la wysiwyg) było takie samo, jak rozdzielczość ekranu, jednakże ktoś np. na mały monitorze z małą rozdzielczością, jak wyświetli mu się edytor z jakąś wielką rozdzielczością, to nie będzie to ładnie wyglądać. Myślałem również, aby wyświetlać edytor 100%x100%, ale klient chce mieć, aby to, co będzie wyświetlało się na tablecie, aby wyglądało tak samo na ekranie, czyli wynika na to, że muszą być rzeczywiste wymiary edytora. Ale pomyślałem, że może można to jakoś skalować? Czyli np. na mały monitorze wyświetlę edytor pomniejszony np. o 50% i żeby jego treść była pomniejszona o 50%, czyli takie użycie "CTRL + SCROLLDOWN", ale nie dla całej strony, tylko dla samego edytora na tej stronie. Czy ma ktoś pomysł na to?

@edit:
Czyli ogólnie satysfkacjonowałaby mnie możliwość poprzez JavaScript (może biblioteka jQuery?) zrobić resize o ileś tam procent (tyle, ile podam). Czyli cała strona jest normalnej wielkości. A div wraz z całą zawartością ma np. 50%. Ale żeby to wszystko w tym div'ie zachowało proporcje i swoje miejsca. Czyli coś na zasadzie CTRL + SCROLL, ale poprzez JavaScript i to dla jednego div'a.

a nie mozesz użyć cssowego @media screen i do kazdj rozdzielczosci dopasowac sobie tego diva ?

1. skalowanie strony z automatu to głupota, ponieważ powinno się to zostawić użytkownikowi.
2. jeśli już musisz to robić to poszukaj pod frazą "jquery zoom" np. http://jaukia.github.io/zoomooz/ jest też zoom w CSS3 ale nie działa to dobrze wszędzie.
3. lepszym wyjściem byłoby zastosowanie RWD które wyjaśnia tę kwestię.

Z tym, że to, co będzie w edytorze (czyli w DIV'ie, bo DIV jest editable) ma wyświetlać się tak samo na tablecie (taki sam układ, w tym samym miejscu elementy: tekst, obrazki, filmiki). Więc jak to inaczej mogę odwzorować?

@edit:
To może troszkę inaczej wyjaśnię. Jak zrobić, aby edytor wysiwyg był responsywny, ale żeby zachowywał proporcje oraz umieszczenie elementów wewnątrz siebie? Docelowo, to co będzie edytowane w edytorze, będzie na stronie o rozmiarach 1024x768. I po prostu klient zażyczył sobie, aby w edytorze widział dokładnie, to jak będzie wyświetlało się na stronie. Z tym, że w edytorze może być tekst, obrazki, filmiki oraz tło obrazkowe. Dlatego myślałem o zmniejszaniu poprzez JavaScript edytora wraz z content'em procentowo. Ma ktoś jakiś pomysł?

Z tego co Ty mówisz ma być identyczny obraz na wielu urządzeniach, tylko inaczej skalowany?

Jeżeli tak, to jest to kompletny bezsens. Popatrz na czcionkę w tym poście. Co będzie jak się ją zmniejszy 8 razy? Przez lupę będzie ją nawet ciężko rozczytać.

Tak sobie klient zażyczył. Docelowym urządzeniem jest 1024x768. Ale chodzi tutaj o edytor wysiwyg, który na każdej rozdzielczości ma pokazywać tak samo, jak będzie to wyglądać na docelowym 1024x768.

O ile ikonki samego edytora jeszcze idzie upchnąć i przeskalować odpowiednio, aby były w tym samym miejscu na każdym urządzeniu o tyle sam font w edytorze już nie, ponieważ na to składa się wiele pobocznych czynników na które nie masz wpływu, więc taki sam wygląd na każdym urządzeniu jest niemożliwy do realizacji i nawet nie zawracaj sobie tym głowy.
Jeśli klient nie jest w stanie tego rozumieć, to już jego problem.

Wykombinowałem, że użyję CSS3 i scale. Skaluje całego DIV'a wraz z zawartością.

Tylko, że to pół środek. Jak rozwiążesz problem np. z uszkodzonym webfontem, gdzie na windows xp masz dodatkowe 4px marginesu, na win7 6px a na mac -2px ?

Reset CSS?

Reset CSS Ci nie pomoże, ponieważ plik z fontem jest uszkodzony i każdy system interpretuje go inaczej.

Coś polecasz?

Nie, też nad tym swego czasu siedziałem i odpuściłem. Tekstu w przełożeniu 1na1 na każdym urządzeniu nie uzyskasz. A jak trafisz na klienta który podeśle Ci zakupione za 50$ uszkodzone pliki TTF, OTF, EOT czy SVG które muszą być wykorzystane, a nie można ich poprawić ze względu na licencje, to leżysz, bo układ rozwalą wspomniane dodatkowe marginesy, choć to i tak może być małe piwo.

Poza tym sprawdź sobie też scale pod opera i chrome na linux... tekst mimo że natywny, różni się.
Przekonaj klienta to RWD, pokaż kilka rozwiązań, wyjaśnij o co w tym chodzi i dlaczego będzie to lepsze.
Bo to co chcesz uzyskać... to tak jakbyś chciał manipulować osobnym stylem do wydruku... też na każdej przeglądarce będzie inaczej.

edycja:
http://webmaster.helion.pl/index.php/css3-...transform-scale

zrzut z opery i chrome... przy większej ilości tekstu w którymś momencie zdanie przejdzie do nowej linii, dzięki właśnie nadwyżce px.
http://s21.postimg.org/3q8najdvr/image.png

Ogólnie to jest tylko system administrowania tą stroną i to tylko to ma być tak dostępne. Docelowo strona będzie na tablecie. Ponadto klient będzie raczej korzystał tylko z Firefox'a.