Адаптивная вёрстка

68

DoomHell

20 апреля 2015, 14:31

2615

Друзья, почитав основательно этот форум, решил всё-таки переверстать свой сайт используя Адаптивную вёрстку, также почитал на Habrahabr'е по этому поводу и не могу понять везде "тычат" Цитата: '@media screen and (max-width:480px)/* Смартфоны */

@media screen and (max-width: 800px)/* Планшеты */'

Ладно с планшетами понятно, но вот со смартфонами почему 480px? Кто сейчас такими телефонами пользуется? Всех кого я знаю Ниже HD разрешения ни у кого нету, у меня года 2 уже 5,5 Дюймов FullHD, Как под Современные смартфоны подгонять вёрстку? Разрешение на смартфонах уже давно догнало и планшеты и даже телевизоры!!! Я считаю не правильно привязывать вёрстку к разрешению! Нужно отталкиваться от диагонали устройства, что думаете по этому поводу?

P.S: Ой действительно не в тот раздел, много вкладок открыто было, видать промахнулся вкладкой

2

W

5

Wolfram

19 мая 2015, 08:25

#1

Плотность пикселей иная.. Фильм то вы с телефона посмотрите в HD. Но в браузере содержимое телефона воспринимает не в таком разрешении/

К примеру можете в метрике глянуть..

У меня Iphone 5 пишет - 320x568

HTC One M7 - 360x640

1

D

23

denisyan

7 июня 2015, 22:58

#2

По этой теме есть много рассуждений на просторах интернета, например

http://www.kylejlarson.com/blog/2015/iphone-6-screen-size-web-design-tips/

В кратце, вам нужно определить максимальные разрешения для ТИПА устройства. Разрешение у них идет плотностью пикселей для картинок, к примеру если на большом брате 1920х1080 это нормальный сайт, то когда вы его откроете на смартфоне, то получится ерунда неудобная с текстом для лупы :)

EW

1

ExWm

17 июня 2015, 14:42

#3

на самом деле. далеко на все еще с современными устройствами и высокими разрешениями. хотя несомненно доля таких устройств велика и постоянно растет

все же на старые устройства я бы не забивал. ибо их тоже хватает.

Вот пример. с типами устройств и основными разрешениями

@media only screen and (max-width: 1080px) and (orientation : portrait) {
/* PORTRAIT:
Windows Surface Pro*/
}

@media only screen and (max-width: 800px) and (orientation : portrait) {
/* PORTRAIT:
Acer Iconia Tab A100
Acer Iconia Tab A200
Acer Iconia Tab A502
Arnova 8C G3
ASUS Padfone
ASUS Transformer Pad TF300T
ASUS Transformer TF101
Motorola Xoom
Motorola Xoom 2
Samsung Galaxy Note 10.1
Samsung Galaxy Tab 8.9
Samsung Galaxy Tab 10.1
Samsung Galaxy Tab 10.1*/
}

@media only screen and (max-width: 768px) and (orientation : portrait) {
/* PORTRAIT:
Apple iPad
Apple iPad 2
Apple iPad 3 (and 4)
Apple iPad Mini
Archos 80G9
BAUHN AMID-972XS
HP Touchpad
LG Optimus Pad
Microsoft Surface (RT)
Panasonic Toughpad A1
Kindle Paperwhite*/
}

@media only screen and (max-width: 640px) and (orientation : portrait) {
/* PORTRAIT:
Acer Iconia Tab A500
Arnova 7FG3
Nexus 7*/
}

@media only screen and (max-width: 600px) and (orientation : portrait) {
/* PORTRAIT:
Acer Iconia Tab A101
Archos 70b (it2)
Arnova 10b G3
BlackBerry PlayBook
Kindle 3
Kobo eReader Touch
Samsung Galaxy Tab 2 7.0
Samsung Galaxy Tab 7*/
}

@media only screen and (max-width: 540px) and (orientation : portrait) {
/* PORTRAIT:
HTC Evo 3D
Kindle Fire HD 7
Kindle Fire HD 8.9
Ainol Novo 7 Elf 2*/
}

@media only screen and (max-width: 480px) and (orientation : portrait) {
/* PORTRAIT:
Arnova 7 G2
BlackBerry Bold 9780
HTC Desire Z
Nokia N900
Samsung Galaxy Grand*/
}

@media only screen and (max-width: 400px) and (orientation : portrait) {
/* PORTRAIT:
Samsung Galaxy Note
Nexus 4
HTC One S
HTC One XL
HTC Sensation XL
HTC Velocity 4G
Motorola Droid3
Motorola Droid Razr
Motorola Razr HD 4G
Motorola Razr M 4G
Nokia 500
Samsung Galaxy Note 2
Samsung Galaxy S3
BlackBerry Bold 9900
BlackBerry 9520
BlackBerry Z10*/
}

@media only screen and (max-width: 360px) and (orientation : portrait) {
/* PORTRAIT:
Apple iPhone 3G
Apple iPhone 3GS
Apple iPhone 4
Apple iPhone 4S
Apple iPhone 5
Apple iPod Touch
BlackBerry Bold 9360
BlackBerry Bold 9790
BlackBerry Curve 9320
BlackBerry Curve 9380
BlackBerry Torch 9800
BlackBerry Torch 9810
HP Veer
HTC 7 Mozart
HTC 7 Trophy
HTC Desire
HTC Desire C
HTC Desire HD
HTC Legend
HTC One V
HTC Titan 4G
HTC Wildfire S
HTC Windows Phone 8X
Huawei U8650
LG Optimus 2X
LG Optimus L3
Motorola Defy
Motorola Milestone
Nexus S
Nokia Lumia 610
Nokia Lumia 710
Nokia Lumia 800
Nokia Lumia 820
Nokia Lumia 900
Nokia Lumia 920
Samsung Galaxy Ace
Samsung Galaxy Ace 2
Samsung Galaxy S2
Sony Xperia E Dual
BlackBerry Curve 9300*/
}

@media only screen and (max-width: 240px) and (orientation : portrait) {
/* PORTRAIT:
LG Viewty KU990
Nokia 700
Nokia 2700
Nokia N95
Samsung Galaxy S3 Mini
Nokia 300*/
}

@media only screen and (max-width: 1920px) and (orientation : landscape) {
/* LANDSCAPE:
Windows Surface Pro*/
}

@media only screen and (max-width: 1366px) and (orientation : landscape) {
/* LANDSCAPE:
Microsoft Surface (RT)*/
}

@media only screen and (max-width: 1280px) and (orientation : landscape) {
/* LANDSCAPE:
Acer Iconia Tab A100
Acer Iconia Tab A200
Acer Iconia Tab A502
ASUS Transformer Pad TF300T
ASUS Transformer TF101
Motorola Xoom
Motorola Xoom 2
Samsung Galaxy Note 10.1
Samsung Galaxy Tab 8.9
Samsung Galaxy Tab 10.1
Samsung Galaxy Tab 10.1
LG Optimus Pad
Acer Iconia Tab A500*/
}

@media only screen and (max-width: 1130px) and (orientation : landscape) {
/* LANDSCAPE:
ASUS Padfone
Arnova 8C G3
Arnova 7FG3*/
}

@media only screen and (max-width: 1024px) and (orientation : landscape) {
/* LANDSCAPE:
Apple iPad
Apple iPad 2
Apple iPad 3 (and 4)
Apple iPad Mini
Archos 80G9
BAUHN AMID-972XS
HP Touchpad
Panasonic Toughpad A1
Acer Iconia Tab A101
Archos 70b (it2)
Arnova 10b G3
BlackBerry PlayBook
Samsung Galaxy Tab 2 7.0
Samsung Galaxy Tab 7
Ainol Novo 7 Elf 2*/
}

@media only screen and (max-width: 980px) and (orientation : landscape) {
/* LANDSCAPE:
Nexus 7
HTC Evo 3D*/
}

@media only screen and (max-width: 802px) and (orientation : landscape) {
/* LANDSCAPE:
Kindle Fire HD 7
Kindle Fire HD 8.9
Arnova 7 G2
HTC Desire Z
Nokia N900
Samsung Galaxy Grand*/
}

@media only screen and (max-width: 691px) and (orientation : landscape) {
/* LANDSCAPE:
BlackBerry 9520*/
}

@media only screen and (max-width: 640px) and (orientation : landscape) {
/* LANDSCAPE:
Samsung Galaxy Note
HTC One S
HTC One XL
HTC Sensation XL
HTC Velocity 4G
Motorola Droid Razr
Nokia 500
Samsung Galaxy Note 2
Samsung Galaxy S3*/
}

@media only screen and (max-width: 600px) and (orientation : landscape) {
/* LANDSCAPE:
Motorola Droid3
Nexus 4
Motorola Razr HD 4G
Motorola Razr M 4G
Motorola Defy
Motorola Milestone
Apple iPhone 5
HP Veer*/
}

@media only screen and (max-width: 540px) and (orientation : landscape) {
/* LANDSCAPE:
HTC Desire
HTC Desire HD
HTC One V
LG Optimus 2X
Nexus S
Samsung Galaxy Ace 2
Samsung Galaxy S2
BlackBerry Z10*/
}

@media only screen and (max-width: 480px) and (orientation : landscape) {
/* LANDSCAPE:
Apple iPhone 3G
Apple iPhone 3GS
Apple iPhone 4
Apple iPhone 4S
Apple iPod Touch
BlackBerry Torch 9800
BlackBerry Torch 9810
HTC 7 Mozart
HTC 7 Trophy
HTC Desire C
HTC Legend
HTC Titan 4G
HTC Wildfire S
HTC Windows Phone 8X
Huawei U8650
Nokia Lumia 610
Nokia Lumia 710
Nokia Lumia 800
Nokia Lumia 820
Nokia Lumia 900
Nokia Lumia 920
Samsung Galaxy Ace
Sony Xperia E Dual*/
}

@media only screen and (max-width: 320px) and (orientation : landscape) {
/* LANDSCAPE:
Samsung Galaxy S3 Mini*/
}

ну и естественно потом потестить все это дело на тестилках типа http://www.isresponsive.com/

225

D.iK.iJ

17 июня 2015, 20:15

#4

Если что, в подписи есть тема про адаптивную верстку - что и как делал.

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).

K

45

kostyanet

18 июня 2015, 03:12

#5

Отношение количества на расстояние - разрешение.

Просто количество - это количество пикселов, пикселяж.

К экранам не dpi не lpi исторически не применялись, всегда считали строки и точки в строчках, ибо размер первых экранов менялся просто поворотом ручки. Так и повелось.

Поэтому диагональ ничего не значит кроме указания на физический размер.

На планшетах и смартах теперь любой нормальный сайт рендерится нормально, а на мобилки быдла можно забить.

MYSQL PHP JS HTML CSS SEO TXT США СССР

W

86

webgroupco

18 июня 2015, 04:01

#6

Здравствуйте уважаемые!

У меня вопрос, хочу сделать моб. версию своего сайта.(сайт указан в подписи)

Не могу решить что лучше: адаптивная верстка шаблона или сделать отдельно сайт для моб. устройств.

Читал что и в первом варианте есть свои +- и во втором.

Буду благодарен за ваши рекомендации.

Записи в Elementor Оптимальное количество статьей в Как настроить как выглядит

EW

1

ExWm

18 июня 2015, 23:57

#7

webgroupco:
Здравствуйте уважаемые!

У меня вопрос, хочу сделать моб. версию своего сайта.(сайт указан в подписи)
Не могу решить что лучше: адаптивная верстка шаблона или сделать отдельно сайт для моб. устройств.

Читал что и в первом варианте есть свои +- и во втором.
Буду благодарен за ваши рекомендации.

сам задавался таким вопросом. читал интернеты :)

пришел к выводу. что какихто существенных плюсов или минусов нету.

нужно делать то что проще в реализации для вас самих.

Google: E-E-A-T не является фактором ранжирования

Все что нужно знать о DDоS-атаках грамотному менеджеру