W przypadku urządzeń mobilnych rozdzielczość jest naprawdę duża, tylko mały rozmiar ekranu. w oparciu o to:
- Czy w przypadku projektowania stron internetowych kierujemy reklamy na rozdzielczość ekranu (np. 1920x1080)?
- I dla aplikacji mobilnych . czy celujemy w rozmiar ekranu?
website-design
css
html
mobile
responsive-design
Inżynier
źródło
źródło
Odpowiedzi:
Elastyczne projektowanie nie opiera się na rozdzielczości ani rozmiarze ekranu. Zamiast tego responsywny projekt opiera się na treści i sposobie wykonania, dzięki czemu można go dopasować do wszystkich rozmiarów i rozdzielczości.
Sposób, w jaki myślisz o elastycznym projektowaniu, jest zły. Zakładam, że pochodzisz z bardziej konwencjonalnego tła do drukowania, tak? Projektowanie stron internetowych jest znacznie bardziej bezpłatne. Responsywne strony internetowe często nie mają takich samych, konwencjonalnych punktów przerwania lub określonych rozmiarów / rozdzielczości, dla których zostały stworzone, ponieważ sieć pozwala na więcej - pozwala to na osiągnięcie wszystkich rozmiarów ekranu. Tak, możesz projektować, używając dowolnych rozmiarów odpowiednich do tego, co projektujesz, o ile są one rozsądne.
Biorąc to pod uwagę, najlepszą praktyką jest projektowanie w pierwszej kolejności na urządzenia mobilne , które naprawdę należy nazwać najważniejszym na urządzenia mobilne . To zmusza Cię do skupienia się na treści, która jest najważniejsza i możliwa, a następnie pozwala Ci dodawać więcej dla większych ekranów, zamiast zmuszać Cię do rozpoczynania większej ilości na dużych ekranach, a następnie usuwania rzeczy podczas projektowania dla mniejszych. Możesz przeczytać więcej na ten temat w moim responsywnym podkładzie projektowym .
Ale musimy również zaprojektować w sposób pozwalający na reakcję. Najlepszą praktyką jest przykład na żywo, czy to w formie prototypowej, czy w jakimś programie do tworzenia szkieletów, a nie statyczny dokument, taki jak PSD. Jeśli chodzi o programistę, powinniśmy używać responsywnych jednostek i strukturyzować nasz kod w sposób, który ma sens.
Biorąc to pod uwagę, powinieneś traktować rzeczy w kategoriach pikseli, co oznacza rozdzielczość, a nie rozmiar ekranu.
źródło
Naprawdę świetne pytanie!
Moja myląca długa odpowiedź: brak i jedno i drugie
Kilka myśli tutaj komentujących nieco sprzeczności, przed którymi dzisiaj stoimy.
Technologia nie jest tym, czym powinna być od wieków.
Wszyscy powinniśmy projektować w oparciu o rzeczywiste jednostki (lub postrzegany rozmiar) , z pewnym stopniem elastyczności i swobody pozwalając użytkownikowi na pewne dodatkowe korekty.
Ale aby poznać rzeczywiste pomiary, potrzebujemy obu informacji. Wymiary fizyczne i rozdzielczość urządzenia = gęstość pikseli.
Ale okazuje się, że zaledwie kilka lat temu urządzenia ekranowe zaczynają deklarować gęstość pikseli. A niektórzy nie deklarują tego serwerowi, po prostu robią o tym rozgłos. (Aka Ipad, Iphone)
Rozdzielczość wyświetlacza może być wykryta przez system operacyjny, ponieważ konieczne jest odpowiednie wysłanie sygnału, ale dla rzeczywistej wielkości ekranu potrzebujemy ogromnej bazy danych każdego modelu. Niedobrze.
Pozostawia nam to tylko ta rozdzielczość ekranu, że są to pewne informacje, które możemy poznać.
Zupełnie inaczej wygląda konstrukcja dużego monitora FullHD niż ta sama rozdzielczość na urządzeniu mobilnym. Zarówno 1920 x 1080. Auć.
Szczególnym przypadkiem jest to, że w przypadku projektorów, ponieważ nie mamy pojęcia odległości projekcyjnej i odległości widzów.
Częściowym rozwiązaniem są zapytania o media, elementy wektorowe itp.
Krótka odpowiedź
Dla webdesign: przynajmniej dopóki nie znajdziemy czegoś lepszego.
Płynna konstrukcja (procenty) i naturalny przepływ, dobrze zdefiniowane sekcje.
1920 szeroki
z zapytaniem medialnym prawdopodobnie w 1280
i / lub przy 1024
prawdopodobnie w 720
i 480.
z wykrywaniem urządzeń w celu dodatkowego wsparcia.
Dla natywnych aplikacji mobilnych
Ponieważ jest to bardzo specyficzne, wystarczy postępować zgodnie z wytycznymi marki, dotyczącymi interfejsu użytkownika i ikon.
Edytowane.
Dlaczego warto wybrać małą rozdzielczość ekranu na urządzeniu mobilnym FullHD?
Smartfon ma rzeczywistą rozdzielczość FullHD, ale zwykle deklaruje małą rozdzielczość serwerowi i przeglądarce. Możesz przetestować to wyszukiwanie w Google https://www.google.com/search?q=what+is+my+screen+resolution, aby zapytania dotyczące mediów działały.
źródło
Po pierwsze, dziękuję wszystkim za odpowiedzi i cenne wskazówki, to na pewno pomogło!
Pozwól mi dodać moją konkluzję:
W praktyce celowanie w rozdzielczość ekranu mobilnego nie jest dobrym UX, rozdzielczość jest zbyt wysoka dla małego ekranu, czcionki będą zbyt małe do odczytania, ikony będą zbyt małe, aby je kliknąć itp.
Dlatego lepiej jest zaprojektować projekt w oparciu o rzeczywisty rozmiar rzutni! W ten sposób opiera się na tym, co użytkownik może zobaczyć i poczuć.
Aby to osiągnąć w rzeczywistości, należy dodać metatag szerokości okna
<head>roboczego w dokumentach HTML:Informuje to przeglądarkę o renderowaniu strony o szerokości równej szerokości ekranu, dzięki czemu szerokość strony HTML jest równa szerokości ekranu wyrażonej w pikselach. Rozwój można wówczas łatwo zaplanować za pomocą zapytań o media skierowanych do różnych rozmiarów mobilnych widoków (które są trochę do siebie zbliżone) i zapewni bardziej przejrzyste elementy.
Proszę, popraw mnie jeśli się mylę.
Aktualizacja:
Opierając się na moim skromnym doświadczeniu, sugeruję poniższe kroki w celu lepszego reagowania na tworzenie witryn:
1- użyj meta view-port (patrz góra), zwiększy to także pozycję strony w wynikach wyszukiwania na urządzenia mobilne według Google. http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html
Po przetestowaniu wydaje się, że dodanie samego meta view-port zapewni Twojej witrynie ocenę w mobilnych narzędziach do testowania https://developers.google.com/speed/pagespeed/insights/
2 - możesz rozważyć zastosowanie podejścia mobilnego, zawsze łatwiej jest przejść na większy niż mniejszy (zależy od stopnia skomplikowania witryny)
3- Zastosuj hybrydowy system responsywny, połączenie adaptacyjnego (płynnego) i responsywnego (css media-queries), aby to osiągnąć:
Użyj wartości procentowej dla szerokości i poziomych marginesów / wypełnień. (marginesy pionowe mogą mieć ustalony rozmiar w pikselach, jeśli chcesz ... przewijanie nie jest już problemem)
Użyj em do czcionek, w ten sposób, gdy zmienisz rozmiar czcionki dla treści (lub html) w zapytaniu o media, wszystkie elementy CSS dostosują się do tego rozmiaru, użycie px sprawi, że będzie to koszmar, ponieważ musisz wybrać każdą klasę CSS i zmień rozmiar czcionki.
Przesuń div na lewą stronę, aby prawidłowo wyrównała się z dostępną przestrzenią (lub na prawo, jeśli wymaga tego twój projekt).
4- Zdefiniuj punkty przerwania , użyj do tego responsywnego narzędzia testującego. Używam responsywnego widoku projektu firefox, po prostu zawężam szerokość, aż dojdziesz do miejsca, w którym strona stanie się wadliwa (np. 500 pikseli), co oznacza punkt przerwania.
Zastosuj nowe reguły CSS w zapytaniu o media dla tego punktu przerwania (500 pikseli),
5- pamiętaj, aby zachować jakość i przejrzystość strony! jeśli elementy stają się niejasne i zbyt blisko siebie, należy zwiększyć szerokość elementów, aby zajmować szerokość pojemnika i ustawić je pionowo,
i pamiętaj, aby podać nowy rozmiar czcionki dla treści, aby wszystkie podelementy dziedziczyły większą czcionkę i były bardziej czytelne.
6- Powtórz test responsywny i zdefiniuj swój drugi punkt przerwania, najprawdopodobniej nie dostaniesz wielu punktów przerwania, ponieważ używamy tutaj płynnego projektu i właśnie tam zastosowanie procentu zwróci!
Wcześniej pracowałem nad dużą witryną z ciężkimi elementami projektowymi i wymagała tylko 2 zapytań medialnych :)
Mam nadzieję, że to pomoże
źródło
Sposób, w jaki responsywna strona jest ponownie wyświetlana, zależy od wymiarów rzutni (nie ekranu) w pikselach wirtualnych (nie rzeczywistych pikselach).
Na tradycyjnym pulpicie, na którym 1 wirtualny piksel = 1 prawdziwy piksel, jeśli twoja przeglądarka jest ustawiona na szerokość 1000 pikseli, strona zostanie ponownie dopasowana.
Na iPhonie 6, w którym 1 wirtualny piksel (Apple nazywa te punkty ) = 3 rzeczywiste piksele, szerokość przeglądarki to szerokość ekranu, a treść zmieniłaby się tak, aby pasowała do szerokości 417 pikseli (mimo że w rzeczywistości jest to 1242 rzeczywistych pikseli)
Jest to więc trochę dziwne, ponieważ w powyższych przykładach urządzenie z mniejszą liczbą rzeczywistych pikseli jest faktycznie postrzegane jako szerszy obszar wyświetlania w responsywnym układzie.
źródło