elchin

Некорректное отображение на iOS и Android

Рекомендуемые сообщения

elchin    4

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

Народ, посоветуйте как быть. Я смотрел несколько других сайтов на опенкарте, такой проблемы нет. Заранее спасибо!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

Народ, посоветуйте как быть. Я смотрел несколько других сайтов на опенкарте, такой проблемы нет. Заранее спасибо!

Это нужно сделать отдельные стили в CSS 

 

* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
/* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
/* some CSS here */
} 

 

Примеры можешь посмотреть здесь http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
malegender    3

OlegTitarenko, сделал как Вы написали. Теперь на мобильных устройствах отображается корректно.

Но, media queries не работают в IE 8 и ниже, как подружить их?

Читал что нужно вставить код:

<!--[if lt IE 9]>
   <script src="/catalog/view/javascript/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
    <script src="/catalog/view/javascript/css3-mediaqueries.js></script>
<![endif]-->

(скрипты я закачал себе на сервер)

Где в OpenCart нужно разместить данный код?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
deim    242

Скорее всего в catalog/view/theme/ваша_тема/template/common/header.tpl

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
malegender    3

сорри напортачил добавлят ьнужно в catalog/view/theme/ваша_тема/template/common/header.tpl

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
deim    242

сорри напортачил добавлят ьнужно в catalog/view/theme/ваша_тема/template/common/header.tpl

Ну, а я что писал?

У вас всё получилось? По ошибке наверное сначала на стандартный шаблон закинули?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
malegender    3

deim, да Вы были правы. Просто у меня модуль приветствие был включен, в 8 IE весь сайт комком был..

пока не настроил медиа запросы

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Tiggi    0

Помогите новичку. Почитал тему и ничего не понял. Как устранить эту проблему. У меня сайт при отображении на телефоне отображается некорректно. Строки наплывают друг на друга, фото смещаются и появляются надписи типа "text_category". Где менять эти стили CSS?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
deim    242

Помогите новичку. Почитал тему и ничего не понял. Как устранить эту проблему. У меня сайт при отображении на телефоне отображается некорректно. Строки наплывают друг на друга, фото смещаются и появляются надписи типа "text_category". Где менять эти стили CSS?

Ваш шаблон не полностью переведён на русский язык

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
yarik452    0

Привет а у меня такая проблема. На андроид на любых браузерах не отображаеться украинский язык корректно. Русский английский нормально а вот с Украинским проблема буква "і" её как бы небывало. Что делать подскажите пожалуйста.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
booss    6

Это нужно сделать отдельные стили в CSS 

 

* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
/* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
/* some CSS here */
} 

Примеры можешь посмотреть здесь http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

 

Подскажите это в какой-то файл нужно добавить? В какой?

Спасибо.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Похожий контент

    • От Skymih
      Всё перерыл рабочего момента не нашел. Подскажите как заставить работать стандартный слайдер, чтобы он не тормозил на мобильных платформах iPad, iPhone, Android? Другие слайдеры не интересны - тема у сайта подобрана.
    • От georgy83
      Добрый день. Версия магазина ocstore v1.5.4.1. Проблема следующая: поиск на русском языке по магазину работает отлично в десктопных версиях браузеров, на ipad и iphone, однако аппарат на android выдает каракули в поле поиска. При этом в демо магазине на android все работает!
      Скрин 1

      Скрин 2

      ссылка в адресной строке на android на мой магазин имеет вид: http://моймагазин.ru/search?filter_name=%C3%90%C2%BE%C3%90%C2%B1%C3%91%C2%83%C3%90%C2%B2%C3%91%C2%8C - выдает каракули как на скриншоте!
      ссылка в адресной строке на android на демо магазин имеет вид: http://demo.myopenca...%82%D0%BE%D1%80 - работает, не кривит!
      ссылка в адресной строке на десктопах, ipad и iphone на мой магазин имеет вид: http://моймагазин.ru/search?filter_name=обувь
      Подскажите, пожалуйста, где искать этот баг? На форуме похожие вопросы обсуждались, но конкретно этой проблеме решения не нашел.
    • От RGB
      Всем привет! Уже давно интересна эта тема, но все никак не было времени заняться, а сейчас вроде появилось и время, и желание, посему вопрос - с чего начать? Какие книжки/ресурсы посоветуете? Есть небольшой опыт работы с Eclipse. Мне вот знакомые советовали этот сайт как идеальный вариант для тех, кто не хочет писать сложные игры или проги, а просто чтобы быть "в теме" и уметь написать свой калькулятор :-)
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу