Перейти к содержимому


Некорректно Отображается Сайт На Смартфонах


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 8

#1 orubtsov

orubtsov

    Пользователь

  • Пользователи
  • PipPip
  • 33 сообщений

Отправлено 20 Июль 2016 - 11:00

Здравствуйте! При проверке на ошибки Яндекс пишет


  • Тег viewport не указан
    Отсутствие тега viewport вызывает проблемы с корректным масштабированием сайта под мобильное устройство.

    Подскажите, пожалуйста,  куда вставить соответствующий тег и как исправить эту ошибку. Сайт constant-effect.ru


#2 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 20 Июль 2016 - 11:23

Просмотр сообщенияorubtsov (20 Июль 2016 - 11:00) писал:

Здравствуйте! При проверке на ошибки Яндекс пишет
  • Тег viewport не указан
    Отсутствие тега viewport вызывает проблемы с корректным масштабированием сайта под мобильное устройство.

    Подскажите, пожалуйста,  куда вставить соответствующий тег и как исправить эту ошибку. Сайт constant-effect.ru


Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
  <meta name="description" content="{PAGE_META_DESCRIPTION}" />

Замените на:
  <meta name="description" content="{PAGE_META_DESCRIPTION}" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />


#3 orubtsov

orubtsov

    Пользователь

  • Пользователи
  • PipPip
  • 33 сообщений

Отправлено 20 Июль 2016 - 12:03

Просмотр сообщенияFirefly (20 Июль 2016 - 11:23) писал:

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
<meta name="description" content="{PAGE_META_DESCRIPTION}" />

Замените на:
<meta name="description" content="{PAGE_META_DESCRIPTION}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Стало еще хуже. Если раньше на экране смартфона отображался сайт с обрезанным логотипом и черным полем справа, но целиком страница, то теперь все то же самое, только после загрузки видно только часть страницы и пользователю приходится масштабировать, чтобы увидеть хоть что-то осмысленное.  Боюсь он не будет этого делать,  а просто уйдет к конкурентам. Есть ли какие-нибудь другие решения. Откат назад после Вашей рекомендации я пока не делал, чтобы была возможность посмотреть, что получилось.

#4 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 20 Июль 2016 - 13:34

Просмотр сообщенияorubtsov (20 Июль 2016 - 12:03) писал:

Стало еще хуже. Если раньше на экране смартфона отображался сайт с обрезанным логотипом и черным полем справа, но целиком страница, то теперь все то же самое, только после загрузки видно только часть страницы и пользователю приходится масштабировать, чтобы увидеть хоть что-то осмысленное.  Боюсь он не будет этого делать,  а просто уйдет к конкурентам. Есть ли какие-нибудь другие решения. Откат назад после Вашей рекомендации я пока не делал, чтобы была возможность посмотреть, что получилось.

Попробуйте сделать следующее:
Строку:
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Замените на:
  <meta name="viewport" content='width=1200' />

После этого перед проверкой не забудьте очистить кэш.

#5 Сварной

Сварной

    Пользователь

  • Пользователи
  • PipPip
  • 30 сообщений

Отправлено 23 Декабрь 2016 - 22:56

Ну и что получилось?

#6 Сварной

Сварной

    Пользователь

  • Пользователи
  • PipPip
  • 30 сообщений

Отправлено 23 Декабрь 2016 - 23:02


Результаты проверки http://магниты.su/


  • Тег viewport не указан

    Отсутствие тега viewport вызывает проблемы с корректным масштабированием сайта под мобильное устройство.



  • Есть горизонтальная прокрутка

    Контент не помещается по ширине на экран мобильного устройства, что вызывает серьёзные неудобства при использовании сайта.

Результаты проверки


  • Тег viewport не указан

    Отсутствие тега viewport вызывает проблемы с корректным масштабированием сайта под мобильное устройство.



  • Есть горизонтальная прокрутка

    Контент не помещается по ширине на экран мобильного устройства, что вызывает серьёзные неудобства при использовании сайта.
По метрике Результата нет, визуально не проверял.

#7 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 24 Декабрь 2016 - 03:36

Здравствуйте.
Могу посоветовать вам выбрать новый дизайн в разделе Сайт - Галерея тем, переход влияет только на код и файлы в разделе редактор шаблонов, остальную информацию данное изменение не затронет.
Если же говорить о теме Мокко, то зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<meta name="viewport" content="width=1024">
<meta http-equiv="X-UA-Compatible" content="IE=7" />

замените на:
<meta name="viewport" content="width=1024">

В main.css найдите:
body {
font-size: 75%;
line-height: 1.6666em;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
background-color: #FFF;
color: #666;
}

замените на:
body {
	font-size: 75%;
	line-height: 1.6666em;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
	background-color: #FFF;
	color: #666;
	min-width: 1024px;
}

далее найдите:
#cartInfo {
position: absolute;
font-size: 13px;
bottom: 6px;
right: -100px;
white-space: nowrap;
}

замените на:
#cartInfo {
	position: absolute;
	font-size: 13px;
	bottom: 6px;
	right: 0px;
	white-space: nowrap;
}


#8 Сварной

Сварной

    Пользователь

  • Пользователи
  • PipPip
  • 30 сообщений

Отправлено 30 Июнь 2017 - 01:21

Просмотр сообщенияVaccina (24 Декабрь 2016 - 03:36) писал:

Здравствуйте.
Могу посоветовать вам выбрать новый дизайн в разделе Сайт - Галерея тем, переход влияет только на код и файлы в разделе редактор шаблонов, остальную информацию данное изменение не затронет.
Если же говорить о теме Мокко, то зайдите в раздел Сайт - Редактор шаблонов - HTML - найдите:
<meta name="viewport" content="width=1024">
<meta http-equiv="X-UA-Compatible" content="IE=7" />

замените на:
<meta name="viewport" content="width=1024">

В main.css найдите:
body {
font-size: 75%;
line-height: 1.6666em;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
background-color: #FFF;
color: #666;
}

замените на:
body {
	font-size: 75%;
	line-height: 1.6666em;
	font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
	background-color: #FFF;
	color: #666;
	min-width: 1024px;
}

далее найдите:
#cartInfo {
position: absolute;
font-size: 13px;
bottom: 6px;
right: -100px;
white-space: nowrap;
}

замените на:
#cartInfo {
	position: absolute;
	font-size: 13px;
	bottom: 6px;
	right: 0px;
	white-space: nowrap;
}
Смел шаблон на пластик. в нем тоже проблема

#9 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 30 Июнь 2017 - 05:37

Здравствуйте.

В разделе Сайт - Галерея тем наведя на дизайн-тему вы можете проверить заранее адаптивный ли под другие устройства дизайн. Если отображается мобильное устройство, то да:
Администрирование интернет магазина. Галерея бесплатных дизайн шаблонов для сайта(1).png
Администрирование интернет магазина. Галерея бесплатных дизайн шаблонов для сайта.png




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных