Czy w przypadku projektowania elastycznego nadal można zezwolić użytkownikowi na obejrzenie pełnej witryny?Responsywny projekt: Zezwalaj użytkownikowi na przeglądanie pełnej witryny
E.g. Są wyświetlane na iPhonie, ale chcą zobaczyć całą witrynę. Klikają link "Pełna witryna" i pokazują im wersję 1024px.
Jeśli używasz zapytań o media, stosuj reguły tylko pod elementem body, który ma "responsywny".
@media screen and (max-width: 320px) {
body.responsive {
color: blue;
}
}
Jeśli użytkownik nie chce, aby zobaczyć reagujący układ, po prostu usunąć klasy „elastyczne” z elementem ciała, znoszący wszelkie zasady. Możesz zachować preferencje użytkowników za pomocą plików cookie lub innej metody.
Demo: http://jsbin.com/obaquq/edit#javascript,html
Zmniejszenie okna nie więcej niż 500px zamieni tekst bieli i niebieskim tle. Jest to uzależnione od tego, czy ciało ma klasę "responsywną". Kliknięcie pierwszego akapitu przełącza tę klasę, a tym samym przełącza efekty samego zapytania o media.
Nie próbowałem tego, ale myślałem o tym problemie osobiście. Wyobrażam sobie, że możesz użyć przełącznika arkuszy stylów, który dezaktywuje podstawowy arkusz stylów, pozostawiając użytkownikowi pełną wersję. Przełączanie stylów z pewnością nie jest nową koncepcją. Oto artykuł dla ALA ok. 2001 r. Dotyczący zmiany arkuszy stylów: http://www.alistapart.com/articles/alternate/
Zastanawiam się nad tym. Udało mi się, używając jQuery do modyfikacji znacznika widoku, wydaje się działać całkiem dobrze z tego, co mogę powiedzieć do tej pory. Nie wymaga wielu arkuszy stylów lub wielu dodatkowych stylów CSS.
Jest to doskonała odpowiedź. Czy mówisz, że powinienem użyć czegoś takiego jak jQuery, aby sprawdzić, czy jest to urządzenie mobilne, a następnie dodać responsywną klasę? Czy może to zrobić w inny sposób? –
@NicHubbard Domyślnie uruchamiałbym się z responsywną stroną, co oznacza, że domyślnie ładowałem klasę 'responsive' na ciele. Ludzie rezygnują z elastycznego doświadczenia. – Sampson
@NicHubbard Następnie użyj zapytania mediów, aby wyświetlić tylko link "Pełna witryna" na mniejszych ekranach, link usuwa klasę "responsive" –