2012-05-23 15 views
10

Potrzebuję kogoś, kto pomoże mi wyjaśnić moją wiedzę na temat rozmiaru pikseli na nowych telefonach z ekranami o wysokiej gęstości. Od tego czasu rzucanie krzywej piłki do mojego projektu strony internetowej.Projektowanie stron internetowych dla smartfonów - Rozmiar piksela

Moje pierwsze zrozumienie smartfonów polegało na tym, że rozmiar piksela wynosił w przybliżeniu 480 x 320, co ułatwiło projektowanie, ponieważ piksele wciąż pozostawały takie same.

Jednak niektóre smartfony są podwójne (lub więcej) niż to. Wydaje mi się, że iPhone jest naprawdę podwójny w rozdzielczości 960 x 640. Mój Galaxy Nexus to 1280 x 720.

Teraz to działa dobrze, gdy używamy%. Jest jednak wiele rzeczy, dla których chciałem użyć wartości pikseli fix dla. Na przykład wiele wartości wysokości nie musi być w% s. Dodatkowo, jeśli wysokość jest ustalona, ​​niektóre elementy, takie jak logo, ikony, niektóre obrazy, nie będę chciał rozciągać się, gdy szerokość się powiększy ... więc będą potrzebować stałej wartości.

Jednak jak sobie z tym poradzić, gdy piksel nie jest tak naprawdę spójnym pomiarem fizycznym?

Łatwiej przy użyciu przykładu, więc jeśli ktoś mógłby mi to wytłumaczyć, powiedz ikony jako przykład.

Po zalogowaniu się na Facebooku na moim telefonie widzę te trzy ikony powiadomień na pasku nawigacyjnym (zaproszenia do znajomych, wiadomości i coś innego). Są one naprawione. Niezależnie od tego, czy mam telefon wyprostowany, czy po jego stronie, pozostają one dokładnie tego samego rozmiaru. Jedyne, co zmienia się wraz z szerokością, to przestrzeń pomiędzy ... zasadniczo tym, nad czym pracuję.

Jaki byłby pomiar tych ikon? Po pierwsze, wiem, że standardowa ikona ma zwykle 16x16. Czy w przypadku smartfonów o dużej gęstości będą musiały mieć 32 x 32? Jednak nie wydają się być tego samego rozmiaru co moje ikony 16x16, które widzę na moim pulpicie. Wyglądają na więcej 12x12. Więc nie jestem pewien, ale sądzę, że istnieje inny "standardowy" rozmiar ikon dla smartfonów, a następnie dla komputerów stacjonarnych (co by to było?).

W każdym razie mam już kod CSS identyfikujący, że telefon komórkowy jest używany do osiągnięcia mojego układu mobilnego. Jednak czy muszę pójść o krok dalej, aby rozpoznać gęstość pikseli, a następnie dostosować moje ustalone wartości, aby w tym przypadku były podwójne? Czy istnieje inny/lepszy sposób?

Każda pomoc jest doceniana. Jestem trochę zakłopotany i nie ma tam zbyt wielu informacji na ten temat. Dzięki i przepraszam za długotrwały post!

+0

Wygląda na to, że problem jest stosunek pikseli. Wyświetlacze Retina mają stosunek pikseli 2: 1 (jeden piksel na siatkówce jest taki sam jak 2 na zwykłym wyświetlaczu). To spowodowałoby, że rozdzielczość wydaje się podwójna, jak się spodziewacie. Trwa dyskusja na ten temat i jestem pewien, że możesz znaleźć artykuły z niewielkim wyszukiwaniem. –

+0

Oto artykuł, który może dostarczyć więcej informacji (jest ich wiele) http://menacingcloud.com/?c=highPixelDensityDisplays –

Odpowiedz

6

Lista gęstości pikseli dla urządzeń: http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/ Twoim problemem jest prawdopodobnie zmiana współczynnika.

Tu jest ładny artykuł obejmujący pewne czułe badania, które ja osobiście jak odwołać

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Pomijanie do końca; wyświetlacz iPhone 4 Retina jest na przykład podwójna gęstość pikseli i tutaj jest przykład z powyższego artykułu kierowania go (nie badane) http://thomasmaier.me/blog/2010/06/23/css-for-iphone-4-retina-display/

i kolejny artykuł dając trochę informacji na temat konieczności dokonywania 2 zdjęcia z innym ppi http://bjango.com/articles/designingforretina/

osobiście używam Twittera Bootstrap & jego Responsive wtyczki dla układu projektowania z wykorzystaniem CSS: http://twitter.github.com/bootstrap/scaffolding.html#responsive

+0

Dziękujemy! To były jedne z najbardziej pomocnych linków, o które mogłem prosić. – jstacks

+2

Artykuł Wikipedii został usunięty. Oto kolejna lista urządzeń o wymiarach w pikselach: http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/ – steel

Powiązane problemy