Сайт на разных устройствах, некорректное отображение

12 3
V
На сайте с 18.04.2015
Offline
33
594

Подскажите пожалуйста, заметил что на разных устройствах, имею ввиду в основном мобильные, смартфоны и планшеты, сайт отображается некорректно, тег <meta name="viewport" content="width=device-width"> стоит, на моем смартфоне (андроид) отображается корректно. Через сервис quirktools и яндекс-вебвизор заметил следующее http://prntscr.com/obygzp

http://prntscr.com/obyhd4

Можно это как-то исправить, или это дело чисто в верстке?

S
На сайте с 30.09.2016
Offline
469
#1
vovalist:
Можно это как-то исправить, или это дело чисто в верстке?

Исправить можно, дело чисто в вёрстке. На сайте отсутствует респонсив для мобильных устройств.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
D.iK.iJ
На сайте с 26.05.2013
Offline
229
#2

Попробуйте рекомендуемый Гуглом

<meta name="viewport" content="width=device-width, initial-scale=1">

А так, дело 100% в верстке. Нужно смотреть.

Ну и все эти сервисы - просто показывают сайт во фрейме. Лучше используйте эмулятор по F12 (там иконка телефона).

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
V
На сайте с 18.04.2015
Offline
33
#3
Sitealert:
Исправить можно, дело чисто в вёрстке. На сайте отсутствует респонсив для мобильных устройств.

Да, у меня там есть несколько этих медиа в css, но не под все разрешения, я думал, что под остальные будет нормально в экран влазить, но просто мелко, если вьюпорт поставить, но оказалось нет..

---------- Добавлено 08.07.2019 в 12:16 ----------

DiKiJ:
Попробуйте рекомендуемый Гуглом


А так, дело 100% в верстке. Нужно смотреть.
Ну и все эти сервисы - просто показывают сайт во фрейме. Лучше используйте эмулятор по F12 (там иконка телефона).

Попробовал через ф12, тоже самое, не помогает оказывается вьюпорт во все разрешения впихнуть(

Дело в том что у меня сайт из png-картинок, как их растягивать по всей длине я не знаю, поэтому фикс. размеры, может прописывать их размеры не в px, а в em.. Это весь шаблон надо перелопатить к сожалению мало опыта.

Сайт если что http://fantasticfilm.ru/

oxg
На сайте с 08.08.2011
Offline
218
oxg
#4

В этом разделе вам могут сделать адаптивную верстку вашего шаблона за 1-10 к руб. /ru/forum/webmasters-jobs/development

у вас же вроде DLE

или спросите человека выше DiKiJ, он занимается, может поможет)

Прокси IPv6 Россия (http://proxy-ipv6.ru/proxy_ipv6.html) /32 сеть, каждый IP в отдельной /48 сети Прокси IPv4 (http://proxyk.ru/proxy-russia.html) более 160 подсетей А,B,C Прокси для Инстаграм (http://proxy-ipv6.ru/instagram-proxy.html)
V
На сайте с 18.04.2015
Offline
33
#5
oxg:
В этом разделе вам могут сделать адаптивную верстку вашего шаблона за 1000 -5000р /ru/forum/webmasters-jobs/development
у вас же вроде DLE

Нет, у меня юкоз

D.iK.iJ
На сайте с 26.05.2013
Offline
229
#6

Да с картинками вообще особых проблем нет. Начните с простого универсального:

@media screen and (max-width: 960px) {
img {max-width: 100% !important; height: auto !important; box-sizing: border-box;}
iframe, textarea, input, button, submit, select, video, object, embed {max-width: 100% !important; box-sizing: border-box;}
table, span, div, ins {max-width: 100% !important;}

}
@media screen and (max-width: 775px) {
}
@media screen and (max-width: 500px) {
}

И дальше - уменьшать окно браузера и смотреть - что происходит.

Да, раз шаблон не адаптивный - этот мета-тег лучше вообще убрать. Сайт тогда хоть в экран влазить будет.

V
На сайте с 18.04.2015
Offline
33
#7
DiKiJ:
Да с картинками вообще особых проблем нет. Начните с простого универсального:



И дальше - уменьшать окно браузера и смотреть - что происходит.
Да, раз шаблон не адаптивный - этот мета-тег лучше вообще убрать. Сайт тогда хоть в экран влазить будет.

Да эт надо весь шаблон наверное перелопачивать.. меню это огромное на низ наверное придется, а слайдер убрать вообще.. короче сложно все(

S
На сайте с 30.09.2016
Offline
469
#8

А кто сказал, что будет легко? Наверное, не просто так за это даже деньги платят.

D.iK.iJ
На сайте с 26.05.2013
Offline
229
#9

Ну и можно прямо стилями начать адаптировать сайт:

@media screen and (max-width: 960px) {

img {max-width: 100% !important; height: auto !important; box-sizing: border-box;}

iframe, textarea, input, button, submit, select, video, object, embed {max-width: 100% !important; box-sizing: border-box;}

table, span, div, ins {max-width: 100% !important;}

.wrapper {width: auto; margin-left: 15px; margin-right: 15px;}

.cont-head-m, .cont-head-t, .cont-head-b {width: 100%; background-size: 100% 100%;}

#flex-wrap {display: block;}

.cont-l, .cont-l-nav, .cont-r {width: 100%; box-sizing: border-box;}

.cont-l-nav {padding: 0 7px 0 7px;}

marquee {width: 100%;}

.bg-cont {width: 100%;}

.informer {width: 100%; background-size: 100% 100%;}

.footer {width: 100%;}

}



---------- Добавлено 08.07.2019 в 14:27 ----------

Ну день или два работы. Чего страшного-то? )) Я таких уже почти 300 переделал. Ну да, если есть готовый адаптивный шаблон - возьмите.

---------- Добавлено 08.07.2019 в 14:29 ----------

Да, меню можно сделать из левой колонки вот таким скриптом. По идее, тут верстка позволяет и правую колонку захватить, если нужно. Но лучше ее внизу оставить.

V
На сайте с 18.04.2015
Offline
33
#10

DiKiJ, я вот #flex-wrap специально сделал флекс, чтобы поменять местами контент и меню, чтобы контент выше был для сео, а можно как-то через верстку это сделать, а то наворочено и флекс и шмекс?..

А сколько будет стоить по уму сделать тут все?

Вот у меня сделана немного адаптация под @media screen and (max-width: 1200px) сжимается в размерах, я так понимаю надо еще под другие сделать, а именно меню убрать в скрипт, чтобы по кнопке вызывалось (правда конверсия упадет, но что делать), и далее чтобы правый блок вниз падал, этого наверное будет достаточно..?

12 3

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий