Wymiary ekranu telefonu dla popularnych modeli

W dzisiejszym świecie, jest wiele urządzeń, z których ludzie mogą wybierać, i może to być zniechęcające, jeśli próbujesz umieścić i zbudować dla najlepszych doświadczeń na wszystkich urządzeniach. Jednak przy projektowaniu stron internetowych i urządzeń mobilnych, ważne jest, aby mieć świadomość najbardziej popularnych wymiarów ekranu telefonu i rozdzielczości, dzięki czemu można dopasować projekt do ekranu widza. Zoptymalizowana, responsywna strona internetowa ułatwia użytkownikom przepływ i ostatecznie podoba się Twoim odbiorcom.

Wymiary ekranu telefonu a obszar widzenia

Kiedy kupujesz urządzenie, zarówno rozmiar ekranu jak i rozdzielczość określone w specyfikacji są często wyświetlane. Czułość ekranu to pomiar przekątnej ekranu w calach. Nie należy tego mylić z rozdzielczością, która jest liczbą pikseli na ekranie, często wyświetlaną w kategoriach szerokość na wysokość (np. 1024×768). Ponieważ urządzenia o tym samym rozmiarze ekranu mogą mieć bardzo różne rozdzielczości, programiści używają okien wyświetlania podczas tworzenia łatwych w użyciu stron mobilnych. Viewporty mają mniejsze wersje rozdzielczości, co pozwala na bardziej spójne wyświetlanie stron na różnych urządzeniach. Viewporty są często bardziej znormalizowane i mają mniejszą rozdzielczość niż rozdzielczość.

Ale monitory komputerów stacjonarnych i laptopów są poziome (wyższe), wiele urządzeń mobilnych można obracać, aby wyświetlać strony w orientacji poziomej i pionowej (wyższej niż szerokość). Oznacza to, że projektanci i programiści muszą projektować z uwzględnieniem tych różnic. Podczas gdy monitory komputerów stacjonarnych i laptopów są ustawione poziomo (wyżej), wiele urządzeń mobilnych można obracać, aby wyświetlać strony w orientacji poziomej i pionowej (większej niż szerokość). Oznacza to, że projektanci i programiści muszą projektować z uwzględnieniem tych różnic.

Potrzebujesz pomocy w określeniu, czy Twoja strona jest responsywna? Skorzystaj z naszego darmowego narzędzia responsywnych rzutni.

Kodowanie dla różnych wymiarów ekranu telefonu

Byłoby prawie niemożliwe dla firm, aby projektować każde urządzenie indywidualnie. Zamiast tego, programiści często grupują projekty responsywne:

Grupuj style do najbardziej popularnych rozmiarów dla telefonów, tabletów i komputerów stacjonarnych. W tym przypadku wszystko, co jest większe niż 7 cali, jest zazwyczaj wyświetlane z rozdzielczością desktopową lub… Użyj punktów przerwania (zdefiniowanych przez szerokość pikseli, które wyświetlacz dostosuje do rozmiaru ekranu) w zależności od projektu i lokalizacji. Czasami programista może połączyć obie metody, jeśli uzna to za konieczne. Zaleca się, aby zacząć od pogrupowania typowych rozmiarów urządzeń.

Jeśli jesteś programistą i chcesz stworzyć style potrzebne do pracy ze stylem mobilnym lub responsywnym, zamieściliśmy poniżej fragment CSS, który może pomóc. Ważne jest, aby pamiętać, że te punkty załamania nie są stałe dla wszystkich stron i powinny być używane tylko jako przewodnik, aby zacząć:

Przykłady:

media and (Maximum width: 991 pixels) { ** "The beginning of great styles of pills}media and (maximum width: 767 pixels) { ** The beginning of medium styles of pills}screen @media and (maximum width: 479px) { ** "The beginning of phone styles}

Jakie są najpopularniejsze wymiary ekranu?

Wiedząc, że ważne jest, aby brać pod uwagę różne urządzenia podczas projektowania stron internetowych, zebraliśmy listę najbardziej nowoczesnych urządzeń z odpowiadającymi im rozmiarami pikseli i okien wyświetlania, która jest podana poniżej. Jest to skondensowana lista, możesz znaleźć bardziej wyczerpującą listę, która zawiera gęstość pikseli, rozdzielczości fizyczne i CSS (piksele na cal kwadratowy, 'ppi') tutaj.