Funkcja media
zapytania 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 media
funkcja 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 media
funkcja 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 ontouchstart
zdarzenie 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?
źródło
device-width
całkiem złe?Odpowiedzi:
Przestań martwić się tak bardzo o określone urządzenia.
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.
źródło
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.
źródło