viewport — говорим с мобильным браузером и настраиваем изменение размера экрана
До того как вы начнете верстать под мобильную версию стоит вставить в шаблон сайта(в html код) строку с viewport. Эта строка вставляется в head, её задача объяснить мобильному браузеру как себя вести и как отображать сайт для вашего пользователя, к примеру данное решение растянет мобильный экран на 970 пикселей.
А данное решение позволит экрану быть адаптивным и удобно скроильться
Работаем с компьютера
Для того чтобы просмотреть сайт в мобильной версии в firefox необходимо нажать ctrl+shift+m, здесь же можно посмотреть и основные разрешения экрана. Ориентироваться нужно на оба расширения экрана как на вертикальное так и на горизонтальное. Повернуть экран можно стрелочкой сбоку.
Начиная с 800 пикселей ширина может быть меньше так как в некоторых операционных системах есть возможность разместить панель слева от основного экрана. Учитывая это стоит верстать так чтобы по краям оставались поля.
1920×1080 vs 2560×1440 ( SHARPEN COMPARISON )
Адаптивная верста без заморочек
При разработке сайта учитывайте восприятие сайта гуглом, проверить этот параметр можно тут: https://search.google.com/search-console/mobile-friendly,https://testmysite.withgoogle.com/intl/ru-ru/,https://developers.google.com/speed/pagespeed/insights/. Приложение проверяет расширение 480 пикселей, именно это расширение нужно поправить для того чтобы максимально подружиться с гуглом. Другие расширения можно не трогать.
Этот класс устройств отличает традиционно альбомная (ландшафтная) ориентация экрана, что позволяет задавать в адаптивном дизайне лишь ширину экрана для каждого разрешения.
/*Тут будет CSS код для разрешения 320 пикселей и до 479 пикселей*/
/*Тут будет CSS код для разрешения 480 пикселей и до 639 пикселей*/
/*Тут будет CSS код для разрешения 640 пикселей и до 767 пикселей*/
Адаптивный дизайн — разрешения для планшетов
Большинство планшетов способны поворачивать изображение при смене ориентации экрана с книжной на альбомную и наоборот, поэтому для каждого стандартного разрешения потребуется два различных дизайна: по большей стороне и по меньшей в качестве горизонтали.
600×800, 800×600
Ritmix RMD-825, 3Q Qoo! Q-pad, Texet TB-823A
768х1024, 1024×768
Apple iPad mini, Acer Iconia Tab
768×1366, 1366×768
ASUS Transformer Book, Samsung ATIV Smart, Acer Aspire
800х1280, 1280×800
Acer Iconia Tab A3, ASUS MeMO Pad, ASUS Nexus 7, Lenovo Yoga Tablet, Lenovo Idea Tab, Samsung Galaxy Tab, Sony Xperia Tablet
1080×1920, 1920×1080
Nokia Lumia 2520, Microsoft Surface, Samsung ATIV Smart, Lenovo ThinkPad, Acer Iconia Tab W700
1536×2048, 2048×1536
Apple iPad
1600×2560, 2560×1600
ASUS Transformer Pad, Samsung Galaxy Tab Pro
Адаптивная верстка — разрешения для смартфонов
240х320, 320х240
Nokia 225, Nokia Asha 230, Nokia 220, Samsung Galaxy Pocket, Samsung GT-C3590, HTC WildFire, HTC Touch2
320х480, 480х320
Samsung Galaxy S II, Samsung Galaxy Fame, Samsung Galaxy Young, Samsung Rex, Samsung Galaxy Pro, Nokia X6, Nokia E7, HTC Legend, HTC Salsa, HTC Hero, Apple iPhone 3
Как включить 4K разрешение на Full Hd мониторе?
480х800, 800х480
Samsung Galaxy S III mini, Samsung Galaxy Golden GT, Samsung Galaxy Grand Neo, Nokia Lumia, Nokia X, Nokia XL, HTC Desire 300-500
540х960, 960х540
Samsung Galaxy Core, Samsung Galaxy S4 mini, HTC Desire 600-700, HTC One S, HTC Sensation XE, Sony Xperia
640х1136, 1136х640
Apple iPhone 4, Apple iPhone 5
720х1280, 1280х720
Samsung Galaxy S III, Samsung Galaxy Note, Samsung Galaxy Grand, Nokia Lumia 900+, Sony Xperia T2 Ultra, Sony Xperia Z1 Compact
750х1334, 1334×750
1080х1920, 1920х1080
Samsung Galaxy S4, Samsung Galaxy S5, Samsung Galaxy Note 3, Nokia Lumia 1520, Sony Xperia Z1, Sony Xperia Z2, Sony Xperia Z Ultra, HTC One, HTC One MAX, HTC One M8
1440х2560, 2560х1440
LG G3, Samsung Galaxy S6
Современный телефон поворачивает экран при смене ориентации с портретной на ландшафтную, что приводит к необходимости создания отдельных дизайнов для каждой его ориентации. При этом дизайны для разных телефонов, даже имеющие одинаковую ширину, могут значительно отличаться. Например, iPhone 3 в горизонтальной ориентации имеет разрешение 480х320, а HTC Desire 300 в вертикальном положении имеет экран 480х800. И хотя ширина у обоих опорных дизайнов одинакова, из-за различной высоты этих экранов потребуется совершенно различный дизайн — ведь их экраны способны вместить совершенно различное количество интерфейсных элементов.
рис. Конфигурация элементов при одинаковой ширине, но различной высоте экрана
(HTC Desire 300 — 480×800, iPhone 3 — 480×320):
Вы видите, что, несмотря на одинаковую ширину экранных разрешений этих устройств в различных ориентациях, они фактически имеют разный размер: вертикальный HTC значительно уже горизонтального iPhone. Это обусловлено тем, что на 1 дюйме экрана iPhone 3 вмещает 165 пикселей, а экран HTC Desire 300 гораздо качественнее (217 пикселей/дюйм), что и приводит к этой разнице. Этот пример наглядно показывает, почему для многих ширин экрана делается по два (и иногда по 3) различных адаптивных дизайна.
Источник: lordr.ru
2560 x 1600 разрешение это сколько
Будь в курсе последних новостей из мира гаджетов и технологий
iGuides для смартфонов Apple
Japan Display представила 7-дюймовый экран с разрешением 2560×1600 пикселей
Александр Кузнецов — 31 мая 2014, 15:29
Компания Japan Display анонсировала выпуск сенсорной ЖК-панели с диагональю семь дюймов и разрешением QXGA (2560×1600 пикселей). Графическая плотность этого экрана составляет 431 пиксель на дюйм.
Матрица выполнена с использованием технологий IPS и WhiteMagic с дополнительными белыми субпикселям. Благодаря этим субпикселям матрице требуется задняя подсветка с меньшей яркостью, что позволяет экономить энергию. По словам Japan Display, новая матрица на двадцать процентов экономичнее существующих IPS-экранов.
Этот экран должен найти применение в миниатюрных планшетах. Его тестовые образцы Japan Display уже отправила производителям мобильной электроники.
Источник: www.iguides.ru
Анонсы: Дисплей Samsung с разрешением 2560 х 1600 станет первым Retina Display для планшетов
Дебаты по поводу retina display для планшетов можно считать завершенными: компания Samsung представила 10.1-дюймовый экран с разрешением 2560×1600 пикселей и плотностью пикселей 300 dpi.
Новый дисплей ультра-высокого разрешения создан по технологии PenTile RGBW, впервые примененной в Nexus One. Многие обвиняли PenTile дисплей в размытости текста и полосатости изображений, но высокая плотность пикселей нового дисплея Samsung должна решить эти проблемы.
Предполагается, что сначала новые дисплеи получат устройства семейства Samsung Galaxy Tab, но не исключено, что разработками заинтересуется и Apple для следующего поколения iPad.
Публикации по теме:
Обсуждение (открыть в отдельном окне)
13.05.2011 18:39 От: RomeoWhite
Ну нифига себе! Такое разрешение не имеют обычные мониторы, а тут какой-то планшет) Видимо, чуют, что Apple представить iPad 3 с большим разрешением.
Обозреватель MForum
14.05.2011 13:54 От: Алексик
A зачем такое высокое разрешение экрана, тем более для планшета? И чем это подкепленно? Процессор сможет обрабатывать такое высокое разрешение? КАк будут идти игры при таком разрешении? Или они будут искусственно уменьшать его, так как видеочип планшета не сможет в реальном времени обрабатывать столько инфы.
Плюс не каждый ЖК-монитор имеет такое же разрешение экрана, у меня например, стандартное 1366×768 точек. Такое ошущение, что просто тупо увеличили количество точек, не задумываясь о последствиях.
#221792 в ответ на #221790
14.05.2011 14:41 От: RomeoWhite
Алексик 14.05.2011 13:54:
A зачем такое высокое разрешение экрана, тем более для планшета? И чем это подкепленно? Процессор сможет обрабатывать такое высокое разрешение? КАк будут идти игры при таком разрешении? Или они будут искусственно уменьшать его, так как видеочип планшета не сможет в реальном времени обрабатывать столько инфы.
Плюс не каждый ЖК-монитор имеет такое же разрешение экрана, у меня например, стандартное 1366×768 точек. Такое ошущение, что просто тупо увеличили количество точек, не задумываясь о последствиях.
Нужно для более детализированной картинки на экране, как на iPhone 4. Подкреплено как раз последним афоночиком. Мне кажется, что производитель считает, что Apple сделает iPad 3 с высоким разрешением экрана.
Процессор справится, учитывая, что в конце года будут мобильные 4-ядерные процессоры. Соответственно и игры пойдут, скорее всего будут называется, по аналогии с iOS — HD Games.
Игры и приложения вряд ли будут иметь 2ххх на 1ххх пикселей, возможно, максимум 1920х1200
Обозреватель MForum
14.05.2011 19:56 От: Алексик
Для более детательного просмотра картинки? Извините, но это ещё не повод увеличивать разрешения экрана. p.s. Это моё личное мнение, не стоит гнаться за сверхвысокими разрешениями. А то получится как с мегапикселями. И ещё не известно как это скажется на автономности работы этих устройств.
16.05.2011 11:06 * От: TheAnd
Ужас. Зачем так развращаться-то? Такая высокая плотность точек и на телефонах-то не сильно востребована, что уж говорить о планшетах? Планшету больше 200dpi ни к чему, по-моему. Тогда под новый Ipad с возросшим разрешением нужны будут новые и новые игры и проги. Не думаю, что Apple пойдёт на такой шаг. Vаксимум 1920*1200. Это уже потолок, больше нафиг никому не сдалося.
P.S:У меня на буке 1366*768, этого вполне хватает пятнадцатидюймовому дисплею.
#221952 в ответ на #221916
16.05.2011 18:41 От: Алексик
TheAnd 16.05.2011 11:06:
Ужас. Зачем так развращаться-то? Такая высокая плотность точек и на телефонах-то не сильно востребована, что уж говорить о планшетах? Планшету больше 200dpi ни к чему, по-моему. Тогда под новый Ipad с возросшим разрешением нужны будут новые и новые игры и проги. Не думаю, что Apple пойдёт на такой шаг.
Vаксимум 1920*1200. Это уже потолок, больше нафиг никому не сдалося. P.S:У меня на буке 1366*768, этого вполне хватает пятнадцатидюймовому дисплею.
Согласен, они просто тупо наращивают то, что можно нарастить. Одним словом, маркетинг, причём тупой. Такие высокие разрешения никому и даром не нужны (мне точно).
16.05.2011 18:42 От: RomeoWhite
Ну я же коротко объяснил, что высокое разрешение нужно, но не в убыток, т.е. не за высокие цены. Iphone 4 сейчас пока лидер по качеству экрана. Есть SGS II, но на мой взгляд, слишком приукрашивает он цвета.
Обозреватель MForum
16.05.2011 19:30 * От: Алексик
RomeoWhite 16.05.2011 18:42:
Ну я же коротко объяснил, что высокое разрешение нужно, но не в убыток, т.е. не за высокие цены. Iphone 4 сейчас пока лидер по качеству экрана. Есть SGS II, но на мой взгляд, слишком приукрашивает он цвета.
Обозреватель MForum
Причём здесь качество экрана и его разрешение? Это совсем разные вещи, не надо путат и уверят в обратном. Вот, разрешение и чёткость — то да! С цветом, я предпочитаю немного более насышенные цвета (на мой вкус), так лучше смотрится.
#221960 в ответ на #221958
16.05.2011 19:33 От: RomeoWhite
Алексик 16.05.2011 19:30:
RomeoWhite 16.05.2011 18:42:
Ну я же коротко объяснил, что высокое разрешение нужно, но не в убыток, т.е. не за высокие цены. Iphone 4 сейчас пока лидер по качеству экрана. Есть SGS II, но на мой взгляд, слишком приукрашивает он цвета.
Обозреватель MForum
Причём здесь качество экрана и его разрешение? Это совсем разные вещи, не надо путат и уверят в обратном. Вот, разрешение и чёткость — то да!
Разрешение экрана один из параметров качества экрана. Можно иметь IPS-матрицу с разрешением 480х800 пикселей и иметь диагональ 20 дюймов. Ну и о каком качестве тогда будет идти речь)?
Обозреватель MForum
16.05.2011 20:22 От: TheAnd
RomeoWhite 16.05.2011 19:33:
Разрешение экрана один из параметров качества экрана. Можно иметь IPS-матрицу с разрешением 480х800 пикселей и иметь диагональ 20 дюймов. Ну и о каком качестве тогда будет идти речь)?
Это разные вещи. Можно вести речь о недостаточной плотности точек, сейчас же речь идёт уже об избыточной. Для IPhone4 своё разрешение с подобной плотностью пикселей является отчасти оправданным. Но в планшете иметь разрешение больше чем у телика — маразм, по-моему. У такого планшета должна быть мощнейшая система, которая также будет требовательна и к энергоресурсам. Т.е. никто не против IPS, но вот фишка с разрешением на данный момент является лишь маркетингом ради маркетинга
#221964 в ответ на #221962
16.05.2011 20:40 От: RomeoWhite
TheAnd 16.05.2011 20:22:
RomeoWhite 16.05.2011 19:33:
Разрешение экрана один из параметров качества экрана. Можно иметь IPS-матрицу с разрешением 480х800 пикселей и иметь диагональ 20 дюймов. Ну и о каком качестве тогда будет идти речь)?
Это разные вещи. Можно вести речь о недостаточной плотности точек, сейчас же речь идёт уже об избыточной. Для IPhone4 своё разрешение с подобной плотностью пикселей является отчасти оправданным. Но в планшете иметь разрешение больше чем у телика — маразм, по-моему. У такого планшета должна быть мощнейшая система, которая также будет требовательна и к энергоресурсам. Т.е. никто не против IPS, но вот фишка с разрешением на данный момент является лишь маркетингом ради маркетинга
ну давайте подсчитаем:
3.5 дюйма — 960х640 (разрешение iPhone 4)
10 дюймов — это 2.8 раз больше диагональ, значит разрешение должно быть 2688х1792 или если округлить до данных производителя — 2560×1600
В следующем году будут 4-ядерные процессоры, будут легко справляться.
Другое дело — кому оно надо, но эпломанов же не спрашивают, за чем у них в iPhone 4 при 3.5 дюймах аж 960х640))
Обозреватель MForum
Источник: www.mforum.ru