Отображение на мобильных устройствах

  • Решено suaveslow

    (@suaveslow)


    12 лет, 2 месяца назад

    У меня следующая проблема, на главную страницу сайта установил слайдер(плагин vSlider), на компьютере все отображается идеально, при различных размерах слайдера. Если просматривать на мобильном устройстве, слайдер выезжает за границу страницы.

    Думаю, что проблема в следующем, ширина страницы задана в процентах(80% от ширины экрана), а размер слайдера задается в пикселях, получается, что на мобильных устройствах не хватает ширины экрана.

    Пробовал задать ширину страницы в пикселях, а размер слайдера меньше нее, тогда все идеально, но это не выход, т.к. шаблон перестает быть резиновым…

    Нужно сделать размер слайдера резиновым, но в настройках этого нет(задается только в пикселях), либо добавить отдельный стиль для мобильных устройств. Но вот как это сделать? Может есть еще какие-то варианты решения?

Просмотр 13 ответов — с 1 по 13 (всего 13)
  • Автор suaveslow

    (@suaveslow)

    12 лет, 2 месяца назад

    или например можно отключить белый фон листа на главной?
    чтобы только слайдер и все?

    Автор suaveslow

    (@suaveslow)

    12 лет, 2 месяца назад

    сайт vozduhoplavateli74.ru

    skodnik

    (@skodnik)

    12 лет, 2 месяца назад

    Для нужных разрешений можно попробовать воспользоваться правилом @media, т.е. на маленьких разрешениях убирать или фон или слайдер или еще что-то придумать. Как воспользоваться описано тут htmlbook.ru/css/media.

    Автор suaveslow

    (@suaveslow)

    12 лет, 2 месяца назад

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

    skodnik

    (@skodnik)

    12 лет, 2 месяца назад

    Идентификатор блока слайдера «vslider_options» пользуясь правилом можно, например, написать так в хвост style.css:

    @media (max-width: 830px) {
	#vslider_options  {
		width:600px;
	}
}

    Автор suaveslow

    (@suaveslow)

    12 лет, 1 месяц назад

    хм…
    попробовал, но к сожалению не работает 🙁

    skodnik

    (@skodnik)

    12 лет, 1 месяц назад

    Странно. Но посмотреть не могу, Ваш сайт is Down for Maintenance.

    Автор suaveslow

    (@suaveslow)

    12 лет, 1 месяц назад

    Прошу прощения, просто закрыл его на время разработки.
    Теперь открыт

    skodnik

    (@skodnik)

    12 лет, 1 месяц назад

    Сейчас я вижу запись в стилях:

    @media  (max-width: 600px) {
	#islidex_options  {
		width:500px;
	}
}

    Это другой блок, его вообще нет в разметке.

    Автор suaveslow

    (@suaveslow)

    12 лет, 1 месяц назад

    я делал блок:

    @media  (max-width: 600px) {
	#vslider_options  {
		width:500px;
	}
}

    потом ставил другой слайдер, не помогло.
    Сейчас сделал такой блок, как сказали вы, включил vSlider, отображение на мобильных устройствах все равно хромает. По-крайней мере на моем HTC и на iPad 3 моего друга.

    skodnik

    (@skodnik)

    12 лет, 1 месяц назад

    Эм… Вопщем, я говорил и указал для конкретного примера, разные слайдеры — разные блоки — разный код.

    Автор suaveslow

    (@suaveslow)

    12 лет, 1 месяц назад

    Ну и на том спасибо. Буду разбираться.

    Автор suaveslow

    (@suaveslow)

    12 лет, 1 месяц назад

    решил проблему установкой слайдера RoyalSlider. Есть возможность указать щирину в процентах, благодаря чему слайдер сам подстраивается под размер экрана, так же как и шаблон.

Просмотр 13 ответов — с 1 по 13 (всего 13)
  • Тема «Отображение на мобильных устройствах» закрыта для новых ответов.