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


Отображение Сайта С Разными Разрешениями Экранов


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

#1 olegus67

olegus67

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 156 сообщений
  • ГородMoscow

Отправлено 04 Июль 2013 - 17:24

Добрый день!
Проблема в следующем. Сейчас сайт без горизонтальной прокрутки отображается при разрешении экрана 1280 px, а при меньших разрешениях появляется горизонтальная прокрутка. Можно ли что то придумать что бы она не появлялась, например уменьшить масштаб всего сайта (хотя бы для разрешения 1024) ?     сайт http://kindtoy.ru/

#2 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 04 Июль 2013 - 18:14

У Вас используется для дизайна-сайта не адаптивный шаблон, рассчитанный на минимальное расширение экрана  1280*... Поэтому блоки, которые присутствуют на сайте не уменьшаются(увеличиваются) в зависимости от расширения экрана. Будет довольно сложно, используя Ваш шаблон сделать его адаптивным.

#3 olegus67

olegus67

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 156 сообщений
  • ГородMoscow

Отправлено 04 Июль 2013 - 18:20

Просмотр сообщенияStasya (04 Июль 2013 - 18:14) писал:

У Вас используется для дизайна-сайта не адаптивный шаблон, рассчитанный на минимальное расширение экрана  1280*... Поэтому блоки, которые присутствуют на сайте не уменьшаются(увеличиваются) в зависимости от расширения экрана. Будет довольно сложно, используя Ваш шаблон сделать его адаптивным.
А мне и не нужно его делать адаптивным. Можно каким либо образом уменьшить масштаб всего сайта процентов до 80% например, что бы при разрешении экрана 1024 весь сайт помещался на экране. Сейчас сайт при 1024 на весь экран не помещается и появляется горизонтальная прокрутка.Грубо говоря мне нужно сделать минимальное разрешение не 1280, а 1024 px. Спасибо

#4 Taisia

Taisia

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

  • Модератоpы
  • 1 289 сообщений

Отправлено 04 Июль 2013 - 19:16

в процентах как вы это описываете уменьшить отображение сайта не получится.
что бы изменить размер придется менять в коде css размеры всех блоков уменьшая и подстраивая их под 1024px

#5 olegus67

olegus67

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 156 сообщений
  • ГородMoscow

Отправлено 05 Июль 2013 - 15:08

Просмотр сообщенияTaisia (04 Июль 2013 - 19:16) писал:

в процентах как вы это описываете уменьшить отображение сайта не получится.
что бы изменить размер придется менять в коде css размеры всех блоков уменьшая и подстраивая их под 1024px
Очень жаль. ну может можно что нибудь придумать ? или скажите где именно менять ? буду менять...

#6 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 05 Июль 2013 - 18:36

Просмотр сообщенияolegus67 (05 Июль 2013 - 15:08) писал:

Очень жаль. ну может можно что нибудь придумать ? или скажите где именно менять ? буду менять...

Измените в коде
body {
min-width: 1190px;
max-width: 1190px;
margin: 0 auto;
}
на 1024px

в коде:
.b_page {
background: url(http://design.kindtoy.ru/header_page.png) no-repeat center top;
border-radius: 0px;
height: 250px;
left: 0;
position: relative;
top: 0;
width: 100%;
max-width: 1190px;
}
тоже на 1024px

В коде:
.container {
position: relative;
width: 1100px;
margin: 0px auto;
}
тоже самое

#7 ligorempty

ligorempty

    Продвинутый пользователь

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

Отправлено 21 Май 2014 - 16:33

Подскажите, а как сделать так, чтобы наш сайт отображался полностью на мобильных устройствах? Сейчас какая-то сырая мобильная версия

#8 Vaccina

Vaccina

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

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

Отправлено 22 Май 2014 - 01:32

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

#9 ligorempty

ligorempty

    Продвинутый пользователь

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

Отправлено 22 Май 2014 - 11:58

Спасибо, решено! Удален блок "адаптивный дизайн"

#10 ligorempty

ligorempty

    Продвинутый пользователь

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

Отправлено 25 Ноябрь 2014 - 11:38

Скажите пожалуйста, как сделать так, чтобы сайт отображался полностью на любом устройстве с которого заходят люди?
Какой параметр отвечает за то, чтобы сайт открылся сразу такой какой он есть, т.е. в полную величину? Сейчас открывается только частично, приходится расстягивать на моб. устройствах.

#11 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 25 Ноябрь 2014 - 12:04

Просмотр сообщенияligorempty (25 Ноябрь 2014 - 11:38) писал:

Скажите пожалуйста, как сделать так, чтобы сайт отображался полностью на любом устройстве с которого заходят люди?
Какой параметр отвечает за то, чтобы сайт открылся сразу такой какой он есть, т.е. в полную величину? Сейчас открывается только частично, приходится расстягивать на моб. устройствах.
Здравствуйте. Данной проблемы не выявили. Магазин открывается в полную величину. Очистите кэш устройства.

#12 ligorempty

ligorempty

    Продвинутый пользователь

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

Отправлено 25 Ноябрь 2014 - 16:55

Алексей, к сожалению все именно не так
Сайт сейчас при загрузке отображается только частично, не во всю ширину.
На первом примере, то как отображается на iPhone6 сейчас, второе изображение уже растянуто вручную.
Именно по второму примеру и должен открываться сайт.
Кэш сброшен. Тестировалось на различных устройствах

Прикрепленные изображения

  • IMG_0158.PNG
  • IMG_0159.PNG


#13 ligorempty

ligorempty

    Продвинутый пользователь

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

Отправлено 26 Ноябрь 2014 - 14:49

Еще вопрос, как после этого сразу поставить баннер по середине?

#14 ligorempty

ligorempty

    Продвинутый пользователь

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

Отправлено 28 Ноябрь 2014 - 13:35

Актуально!

#15 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 29 Ноябрь 2014 - 10:49

Просмотр сообщенияligorempty (26 Ноябрь 2014 - 14:49) писал:

Еще вопрос, как после этого сразу поставить баннер по середине?
Здравствуйте, попробуйте такой вариант
найдите в main.css
#module_area {
width: 760px;
margin: 0 auto;
text-align: center;
padding: 5px 0;
}
замените на

#module_area {
width: 760px;
margin-left: 33%;
text-align: center;
padding: 5px 0;
}


#16 ligorempty

ligorempty

    Продвинутый пользователь

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

Отправлено 02 Декабрь 2014 - 11:54

Здравствуйте
Ирина, спасибо! Пока не понятно как это будет отображаться, пока сайт открывается частично.
Можете ли Вы помочь по предыдущему вопросу отображения "целиком" "как есть"?
Заранее благодарен

#17 Danil

Danil

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

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 02 Декабрь 2014 - 12:20

Просмотр сообщенияligorempty (02 Декабрь 2014 - 11:54) писал:

Здравствуйте
Ирина, спасибо! Пока не понятно как это будет отображаться, пока сайт открывается частично.
Можете ли Вы помочь по предыдущему вопросу отображения "целиком" "как есть"?
Заранее благодарен
Здравствуйте.
У вас был удален код адаптивности(стандартного шаблона), чтобы ее вернуть в конец main.css вставьте
/* Адаптивность шаблона ==============================*/
@media only screen and (min-width: 981px) and (max-width: 1220px) {
  .inner {width:95%;}
}
@media only screen and (min-width: 990px) {
  #header  .flexslider li img.slide_img{display:block !important;}
  #header  .flexslider li .bigPic {display:none !important;}
  #header.borderless {border-bottom:none;}
}
@media only screen and (min-width: 768px) and (max-width: 980px) {
  .inner {width:95%;}
  #header_colapse .inner {background:none !important;}
  #footer .column {width:22% !important;margin:10px !important;min-height:100px;}
  div.prod_hold .prod-info-fly .price, div.prod_hold_recent .prod-info-fly .price {margin-bottom:25px;}
  #column-left + #content div.prod_hold, #column-left + #content div.prod_hold_recent  { margin:0px 11px 20px 11px;}
  #toggle_switch {display:block;}
  p img {max-width:100% !important;height:auto !important;}
  .product-info .cart {height:auto;overflow:auto;}
  .product-info .cart input[type="text"] {margin-bottom:10px;}
  .orderStepName {font-size: 18px;}
  .orderStepName:before {margin-right: 5px;}
  table.form tr td:first-child {width: 40%;*width: 0px;}
  #content .login-content .content {padding: 0;overflow: visible;}
  .login-content  table.form td {position: relative;width: 100%;display: block; padding: 4px 0;}
}
@media screen and (max-width: 785px) {
  .orderStepName {font-size: 16px;}
  table.form  {table-layout: fixed;}
  table.form tr td:first-child {width: auto;}
}
@media only screen and (max-width: 625px) {
  .orderHeader  {display: none !important;}
}
@media only screen and (min-width: 557px) and (max-width: 898px) {
  .item-detail{width: 49%;}
}
@media only screen and (min-width: 480px) and (max-width: 556px) {
  .item-detail {width: 40%;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  #toggle_switch {display:none;}
  .inner {width:86%;}
  #header_colapse .inner {display:block !important;}
  #header #cart {right: 0px;width: auto;float: none;}
  .box-product, .product-list, .product-list2, .product-list3, .product-list4 {text-align:center;}
  div.prod_hold, div.prod_hold_recent {margin:10px auto;}
  div.prod_hold .name, div.prod_hold .price, div.prod_hold_recent .name, div.prod_hold_recent .price {display: none;}
  div.prod_hold .prod-info-fly, div.prod_hold_recent .prod-info-fly{display: block;position: relative;padding: 0;bottom: 0;opacity: 1;width: 200px; }
  div.prod_hold .prod-info-fly .name, div.prod_hold .prod-info-fly .price, div.prod_hold_recent .prod-info-fly .name, div.prod_hold_recent .prod-info-fly .price { display: block !important;}
  #header .links {margin:0;}
  #compareInfo {margin: 10px auto -20px;width: 100%;text-align: center;}
  #header #welcome { display: none;}
  #header #search { position:relative;clear:both;width:440px;margin-bottom: 19px;float: left;}
  #header #search input {width:380px;}
  #header #support {display:none;}
  #header #cart h4, #header #cart #cart-total {display:block;}
  #header #cart .content {top:35px;}
  #header_colapse .inner { overflow: visible; padding:8px 0; background:none !important;}
  #column-left { float:none; width:100%;}
  #column-left .recent {display: none!important;}
  #column-left + #content {margin: 0; }
  #footer .column {width:100% !important;margin:10px 0 !important;min-height:100px;}
  #footer .one_fourth {display: none;}
  #footer .one_fourth.last {display: block;}
  #tabs a {font-size:14px;}
  .product-info .image {width:380px;}
  .product-info .image img{max-width:100%; }
  .product-info >.left, .product-info > .left + .right {float:none;margin: 0;}
  img {max-width:100% !important;height:auto !important;}
  textarea {width: 100%;}
  #column-left div.prod_hold, #column-left div.prod_hold_recent {margin:0px 8px 20px 8px;}
  .product-filter .view-mode label {display: none;}
  #main_nav { display: none; }
  .selectnav { display: block; margin:6px 0 0 0; width:100%; }
  #column-left .box .box-heading:after {content: url("{ASSETS_IMAGES_PATH}downArrow.png?design=spring") no-repeat right center;position: absolute;right: 16px;top: 10px;cursor: pointer;}
  #column-left .box .box-heading + .box-content {display: none;}
  #column-left .box .box-heading.up:after {content: url("{ASSETS_IMAGES_PATH}UPArrow.png?design=spring") no-repeat right center;}
  table.form  {table-layout: fixed;}
  #content .login-content .content {padding: 0;overflow: visible;}
  .login-content h4, .login-content .right p {display: none;}
  p.required {display: none;}
  .login-content  table.form td {position: relative;width: 100%;display: block;padding: 4px 0;}
  .generally label:after {content: ""; display: block;clear: both;}
}
@media only screen and (max-width: 480px) {
  h2 {font-size: 24px;}
  .inner {width:80%;}
  #header_colapse .inner {display:block !important;}
  #toggle_switch {display:none;}
  #header .links {margin:0;}
  #compareInfo {margin-left:0px;float: left;}
  #header #welcome {display: none;}
  #header #search {position:relative;clear:both;width:100%;margin-bottom:10px;}
  #header #search input {width:70%;}
  #header #support {display:none;}
  #header #logo {margin: 0;}
  #header #cart{ width: 98%; min-width: 98%;float: none;margin-bottom: 10px;}
  #header #cart .heading {padding: 0 0 0 46px;}
  #header #cart .cart_circle {right: auto; left: 0;}
  #header #cart h4, #header #cart #cart-total {display:block;text-align: left !important;}
  #header #cart .content {top:35px;}
  #header_colapse .inner {overflow:visible;padding:8px 0;background:none !important;}
  #main_nav { display: none; }
  .selectnav { display: block; margin:6px 0 0 0; width:100%; }
  #column-left {float:none;width:100%;}
  #column-left .recent {display: none!important;}
  #column-left + #content {margin: 0;}
  .box-product, .product-list, .product-list2, .product-list3, .product-list4 {text-align:center;}
  div.prod_hold, div.prod_hold_recent {margin:10px auto;width: 90%;}
  div.prod_hold > div .prod-info-fly, div.prod_hold_recent > div .prod-info-fly {width: 100%;}
  div.prod_hold .name, div.prod_hold .price, div.prod_hold_recent .name, div.prod_hold_recent .price {display: none;}
  div.prod_hold .prod-info-fly, div.prod_hold_recent .prod-info-fly {display: block;position: relative;padding: 0;bottom: 0;opacity: 1; }
  div.prod_hold .prod-info-fly .name, div.prod_hold .prod-info-fly .price, div.prod_hold_recent .prod-info-fly .name, div.prod_hold_recent .prod-info-fly .price{display: block !important;}
  .item-detail {width: 100%;}
  #footer .column {width:100% !important;margin:10px 0 !important;min-height:100px;}
  #footer .one_fourth {display: none;}
  #footer .one_fourth.last {display: block;}
  #tabs a {font-size:12px;padding:10px;}
  .category-info {padding: 10px 0;}
  .category-info .left {float:none;}
  .category-info .right {margin: 10px 0 0 0; padding: 0;}
  .product-info .image {width:260px;}
  .product-info .image img{max-width:100%; }
  .product-info >.left, .product-info > .left + .right {float:none;margin: 0;}
  .login-content .left, .login-content .right {width:95%;float:left;margin-bottom:10px;}
  img {max-width:100% !important;height:auto !important;}
  textarea {width: 100%;}
  #column-left .box .box-heading:after {content: url("{ASSETS_IMAGES_PATH}downArrow.png?design=spring") no-repeat right center;position: absolute;right: 16px;top: 10px;cursor: pointer;}
  #column-left .box .box-heading + .box-content {display: none;}
  #column-left .box .box-heading.up:after {content: url("{ASSETS_IMAGES_PATH}UPArrow.png?design=spring") no-repeat right center;}
  table.form td {position: relative;width: 100%;display: block;padding: 4px 0;}
  #content .login-content .content {padding: 10px 0;overflow: visible;}
  p.required {display: none;}
  #content .buttons .left {display: none;}
}
/* /END адаптивность шаблона ======================================================*/


#18 ligorempty

ligorempty

    Продвинутый пользователь

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

Отправлено 08 Декабрь 2014 - 13:31

не выходит. Помнится мне, я удалил его именно из-за его невнятности.
По сути нужно чтобы сайт открывался в таком же виде как и на пк. Думал, что это просто нужно поставить где-то width для всех разрешений, авто
Не получится так?
Картинка 1-как требуется
Картинка 2-как сейчас, после включения адаптивности
IMG_0159.PNG

Прикрепленные изображения

  • IMG_0196.PNG


#19 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 08 Декабрь 2014 - 15:06

Просмотр сообщенияligorempty (08 Декабрь 2014 - 13:31) писал:

не выходит. Помнится мне, я удалил его именно из-за его невнятности.
По сути нужно чтобы сайт открывался в таком же виде как и на пк. Думал, что это просто нужно поставить где-то width для всех разрешений, авто
Не получится так?
Картинка 1-как требуется
Картинка 2-как сейчас, после включения адаптивности
Здравствуйте, отмените инструкцию из сообщения #17
и уточните какие  еще необходимо внести изменения

#20 ligorempty

ligorempty

    Продвинутый пользователь

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

Отправлено 08 Декабрь 2014 - 15:15

Здравствуйте.
Отменил.
Необходимо, чтобы баннер находился посередине и на мобильных устройствах, когда откроется сайт как на картинке #1




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

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