Responsive Web Design vs. Sniffing User-Agent

13

Funkcja mediazapytania CSS3 stworzyła wiele interesujących możliwości w zakresie tworzenia stron internetowych, które dostosowują się do wielu różnych rozmiarów i urządzeń.

Jednak w praktyce zaczynam mieć wrażenie, że mediafunkcja zapytania CSS3 i cały ruch „Responsive Web Design” mogą nie spełniać obietnic.

Problem, jaki widzę, polega na tym, że pod koniec dnia programiści internetowi dbają przede wszystkim o to, czy ich użytkownicy przeglądają zawartość za pomocą komputera, tabletu lub urządzenia mobilnego. Ale CSS3 zapewnia tylko sposób na wykrycie rozdzielczości ekranu . Teoretycznie wykrywanie rozdzielczości ekranu wydaje się świetnym sposobem na dostosowanie do różnych urządzeń. Ale w praktyce ...

Załóżmy, że mamy prostą funkcję Javascript, która po prostu wyświetla szerokość ekranu:

function foo()
{
   alert(screen.width);
}

W moim Blackberry Touch to daje:

768

W moim Samsungu Galaxy to:

800

Więc ... hm, w tym momencie rozdzielczość popularnych smartfonów zbliża się do rozdzielczości na poziomie komputerów stacjonarnych. Możliwość wykrycia, czy użytkownik przegląda Twoją witrynę za pomocą smartfona, tabletu lub komputera stacjonarnego, wydaje się być coraz trudniejsza, jeśli chodzi tylko o rozdzielczość ekranu.

To sprawia, że ​​podważam całą mądrość stojącą za całym ruchem CSS3 „Responsive Web Design” opartym na zapytaniach medialnych. Wygląda na to, że mediafunkcja zapytania lepiej nadaje się do dostosowania do zmieniającego się okna przeglądarki na ekranie komputera, a nie do różnych urządzeń mobilnych.

Inną możliwą techniką wykrywania urządzeń mobilnych lub tabletów jest użycie funkcji wykrywania, sprawdzając, czy ontouchstartzdarzenie jest obsługiwane. Ale nawet to staje się coraz bardziej zawodne, ponieważ wiele ekranów pulpitu zaczyna obsługiwać dotyk.

Pytanie: Więc ... jako twórca stron internetowych, jeśli nie mogę polegać na RWD lub wykrywaniu funkcji, czy sniffing klienta użytkownika (tak notorycznie niewiarygodny jak zawsze) jest naprawdę najlepszą opcją do wykrywania urządzeń mobilnych?

Channel72
źródło
Jeśli celem Responsive Web Design jest (jak twierdzi Wikipedia ) „łatwe czytanie i nawigacja przy minimalnej zmianie rozmiaru, panoramowaniu i przewijaniu”, to dlaczego obchodzi Cię, czy jest to komputer stacjonarny czy mobilny? Liczy się rozdzielczość i rozmiar ekranu urządzenia, a nie rodzaj urządzenia. Nie?
ruakh
Chyba mówię, że związek między „rozdzielczością ekranu” a rzeczywistym rozmiarem ekranu (np. Centymetry / cale szerokości ekranu) staje się coraz bardziej przejściowy.
Channel72
Myślałem, że powinieneś coś zrobić z zapytaniem o szerokość urządzenia, ponieważ szerokość / rozdzielczość staje się coraz bardziej niedokładna, szczególnie w przypadku gęstości pikseli różnych wyświetlaczy, np. Urządzeń Apple „Retina”. Zatem jeśli szerokość urządzenia mieści się w ogólnej szerokości dla urządzenia mobilnego, wówczas wyświetlany jest inny układ. Dla użytkownika tabletu / komputera pokazuję ten sam układ, tj. Szerokość 1024 pikseli.
zuallauz
@zuallauz, czy wsparcie nie jest device-widthcałkiem złe?
Channel72
Dlaczego nie przejść przez jednostki em? W ten sposób zawartość przesuwa się w oparciu o dostępną przestrzeń tekstową ...

Odpowiedzi:

12

Przestań martwić się tak bardzo o określone urządzenia.

Możliwość wykrycia, czy użytkownik przegląda Twoją witrynę za pomocą smartfona, tabletu lub komputera stacjonarnego, wydaje się być coraz trudniejsza, jeśli chodzi tylko o rozdzielczość ekranu

To jest coraz bardziej trudne do wykrycia przez rozdzielczość ekranu i będzie trudniej dostać tylko więcej urządzeń wejścia na rynek, ale celem zapytaniami mediów jest nie do wykrycia urządzenia types.What zapytaniami mediów są dobre na czyni poprawek do projektu, kiedy w obecnych wymiarach nie jest już przyjemny w użyciu. Jeśli witryna zaczyna się rozpadać przy szerokości 550 pikseli, nie ma znaczenia, czy istnieje urządzenie o tych wymiarach, czy nie: ustawiasz tam punkt przerwania.

To samo dotyczy wykrywania funkcji. Jeśli urządzenie obsługuje dotyk, to jakie to ma znaczenie, jeśli jest urządzeniem mobilnym lub przyszłym monitorem ściennym? Tak czy inaczej, ulepszenia dotyku będą prawdopodobnie przydatne.

Wykrywanie klienta użytkownika - jak już powiedziałeś - jest całkowicie niewiarygodne. Mógłbym zmienić ciąg znaków User-agent na cytaty Szekspira, jeśli naprawdę tego chcę. Co wtedy decyduje Twoja witryna o mojej przeglądarce?

Aplikacje klienckie również wymagają dużo pracy, aby obsłużyć wszystkie możliwości. Czy masz dla Firefoksa na Androida? Chrome na IOS? Delfin na Froyo? Przeglądarka WiiU? Niezwykle ograniczona przeglądarka w moim starym telefonie z funkcją LG? Ryś? IE 13? Spinki do mankietów? IceWeasel? Przeglądarka poradnika Blackberry? Jak odróżniasz Operę na tablecie od opery na telefonie?

Ta lista może rosnąć tylko w miarę upływu czasu.

Mike Gossmann
źródło
Cóż, układ 1-kolumnowy zwykle dobrze pasuje do smartfonów. W przypadku tabletu można uzyskać układ z 2 lub nawet 3 kolumnami, aw przypadku komputerów stacjonarnych zwykle 3 kolumny działają dobrze. Niezależnie od tego idealna liczba wyświetlanych kolumn jest zazwyczaj funkcją biologicznych możliwości ludzkiego oka , a nie rozdzielczości ekranu. Chodzi mi o to, że byłoby miło, gdyby istniała ściślejsza korelacja między rozdzielczością ekranu a prawdopodobieństwem, że typowy człowiek będzie w stanie z łatwością zeskanować witrynę wizualnie. Przynajmniej CSS3 wydaje się zakładać taką korelację.
Channel72
1
Tak naprawdę powinno być. Piksele CSS powinny być definiowane przy użyciu kątów i odległości, a nie fizycznych pikseli. Wielu producentów ignoruje to jednak w ustawieniach domyślnych.
Mike Gossmann
@ Channel72 Układ 1-kolumnowy dobrze nadaje się do dowolnej wąskiej szerokości ekranu . Nie ma znaczenia, czy szerokość ekranu jest wąska, ponieważ jest to przeglądarka smartfona, czy przeglądarka stacjonarna w oknie o dużym rozmiarze na gigantycznym monitorze. Responsive Web Design próbuje odpowiednio dostosować wszystkie scenariusze, niezależnie od klienta użytkownika.
Eric King
Co jeśli zamierzasz wyświetlać użytkownikom mobilnym zupełnie inny widok? A co z zapobieganiem pobieraniu przez aplikacje mobilne wszystkich nieistotnych danych potrzebnych użytkownikom komputerów? Agent użytkownika to droga…
Jan
1

Agenty użytkownika też kłamią. Jeśli korzystasz z Google, znajdziesz listy agentów użytkownika w porównaniu z rzeczywistością. To jest problem. Niektórzy uciekają się do ustawienia rozdzielczości, aby ustalić, jakie to urządzenie.

Obrabować
źródło
3
Jeśli ktoś musiał podać fałszywe dane w danych agenta użytkownika, otrzyma domyślną wersję witryny ...
John