Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

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


elchin
 Share

Recommended Posts

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

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

Link to comment
Share on other sites


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

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

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

  • +1 1
Link to comment
Share on other sites


  • 1 month later...

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 нужно разместить данный код?

Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites


  • 6 months later...

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

Link to comment
Share on other sites


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

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

Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
Share on other sites


  • 10 months later...

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

 

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

Спасибо.

Link to comment
Share on other sites


Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.