2011-01-24 11 views
5

Zastanawiałam się, co polecilibyście dla was, chłopaki i dziewczęta, jako najbardziej wydajni, aby dynamicznie przeskalować stronę w oparciu o rozdzielczość?Najlepszy sposób dynamicznego skalowania strony?

Czy jest coś, co zmienia elementy i obrazy? Czy muszę je wykonywać osobno? Próbowałem użyć procentów i em, ale wydaje się, że to wielki kłopot. Czy są jakieś skrypty? Szukałem już dość długo i nie znalazłem jeszcze niczego, co by pasowało.

+1

To ** jest ** ogromnym wysiłkiem. – Pointy

+0

Moim zdaniem bardzo subiektywna sprawa, to zależy ogromnie od tego, co wyświetlasz i od aranżacji twojej strony. – Trufa

+0

Czy nie można polegać na ctrl/+, ctrl/- i ctrl-0 przeglądarki, aby powiększyć? Po prostu upewnij się, że twój układ jest płynny i powinien skalować prety dobrze –

Odpowiedz

3

Nowe Media Queries są wyładowywane w specyfikacji CSS3. Możesz przeczytać niesamowite article na ten temat z A List Apart Magazine (z example, próby zmiany rozmiaru okna przeglądarki)

Istnieją również istniejące scripts oczywiście.

+0

Bardzo pomocne, dziękuję! – Johannes

1

Najlepszym sposobem na wykrycie orientacji urządzenia jest użycie metatagów. Tag meta widoku jest używany przez Safari/chrome na iPhone'ach i iPadach w celu określenia sposobu wyświetlania strony internetowej. Poniżej przedstawione są właściwości rzutni

Szerokość rzutnia do szerokości urządzenia, dodając następującą deklarację szefa pliku HTML

<meta name="viewport" content="width=device-width"> 

do ustawiania skali do 1,0, dodać do szef pliku HTML:

<meta name="viewport" content="initial-scale=1.0"> 

aby ustawić początkową wagę i wyłączyć skalowanie użytkownika, dodać to do głowy pliku HTML:

Użyj metatagu widoku, aby poprawić prezentację przeglądarki mobilnej. Ten metatag określa szerokość i początkową skalę widoku. Dodaj odpowiednie meta dane rzutni do nagłówka dokumentu, aby poinstruować przeglądarkę, aby prezentowała zawartość w możliwie największym kontekście na ekranie urządzenia. Jeśli nie ustawisz szerokości rzutni, strona zostanie pomniejszona po pierwszym załadowaniu.

Tryb pełnoekranowy

<meta name="apple-mobile-web-app-capable" content="yes"> 

Jeśli zawartość jest ustawiona na yes aplikacja internetowa działa w trybie pełnoekranowym; inaczej nie. Możesz określić, czy strona internetowa jest wyświetlana w trybie pełnoekranowym przy użyciu właściwości Boolean JavaScript window.navigator.standalone tylko do odczytu.