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

[elchin]

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

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

[OlegTitarenko]

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

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

Это нужно сделать отдельные стили в 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]

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]

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

[malegender]

пробовал - не работает((

[malegender]

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

[deim]

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

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

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

[malegender]

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

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

[Tiggi]

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

[deim]

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

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

[Tiggi]

Как мне это исправить?

[yarik452]

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

[booss]

Это нужно сделать отдельные стили в 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

 

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

Спасибо.