Размер div в размер разрешения планшета

@koless · Регистрация: 25.01.2015

Author24 — интернет-сервис помощи студентам

Здравствуйте
Создаю сейчас лэндинг, необходим был слайдер на css, притом такой что бы отображался во весь экран устройства
Для отображение на компьютерах работает без заминок
Но попробовав открыть сайт на планшете размер div'a был больше разрешения

Как сделать так что бы на планшете отображался слайдер в размер экрана планшета

Вот ссылка на сайт http://test16.nichost.ru

@cevil · 26.01.2015, 21:24

Используй медиа-запросы

@koless · 30.01.2015, 12:05 **[ТС]**

Покажите примеры
Как это сделать

@Shakalaka · 30.01.2015, 12:21

У тебя размер слайдов задан в vw и vh. и все по 100%. Если кто-то зайдет с большого экрана, у него твой сайт растянется на весь экран и я думаю, что дизайн будет ужасным. Если уже и используешь vw и vh стоит задать max-width для контейнера. А по-поводу картинок, посмотри версию браузера на планшете vw и vh не всеми поддерживается.
А про медиа-запросы - просто гугли @media-queries в инете миллион больших статей с кучей примеров.

@koless · 30.01.2015, 13:02 **[ТС]**

Да мне то по сути и не нужны они
Посмотрел примеры сейчас
У меня отображение от малых 600х800 до full hd идеальное
А вот с про смотром на мобильных устройствах какая то лажа
Врет например в iwpro.ru у них выглядит замечательно все
Нужно что бы div "slider"
Принимал размер экрана на мобильных устройствах и уменьшал размер изображения как это происходит на любом разрешения заходя с любого разрешения но с компа
А с планшета почему то принимается высота по размеру картинки а ширина по размеру экрана
Картинка обрезается и получается белиберда

@Shakalaka · 30.01.2015, 13:20

Ну так ты задал vh=100% и vw=100% vw - viewport width, vh - viewport height. Ты блоку задаешь 100% от высоты экрана и 100% от ширины экрана. background-size:cover - масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. Вот и обрезается

@koless · 30.01.2015, 13:22 **[ТС]**

Да все верно
Но при просмотре на планшете высота не равняется размеру экрана и не масштабируется почему??

@Shakalaka · 30.01.2015, 13:37

Чувак, у меня на планшете вообще ничего не отображается(слайдер имею в виду). Более того, вообще нигде нет слайдера. Нажми ctr+f5 и у тебя не будет. У тебя в css ошибки.. Скачай web-developer для firefox, и смотри там указаны ошибки в css, там точек с запятой нет, и есть неправильно закрытые правила (нету скобок "}") правь css

@koless · 30.01.2015, 13:45 **[ТС]**

Я сейчас экспериментирую просто

@koless 0 / 0 / 0 Регистрация: 25.01.2015 Сообщений: 5
		1
	Размер div в размер разрешения планшета 26.01.2015, 00:13. Показов 2038. Ответов 8 Метки нет (Все метки) Здравствуйте Создаю сейчас лэндинг, необходим был слайдер на css, притом такой что бы отображался во весь экран устройства Для отображение на компьютерах работает без заминок Но попробовав открыть сайт на планшете размер div'a был больше разрешения Как сделать так что бы на планшете отображался слайдер в размер экрана планшета Вот ссылка на сайт http://test16.nichost.ru 0

@cevil 12 / 12 / 5 Регистрация: 07.04.2014 Сообщений: 174
	26.01.2015, 21:24	2
	Используй медиа-запросы 0

@koless 0 / 0 / 0 Регистрация: 25.01.2015 Сообщений: 5
	30.01.2015, 12:05 [ТС]	3
	Покажите примеры Как это сделать 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	30.01.2015, 12:21	4
	У тебя размер слайдов задан в vw и vh. и все по 100%. Если кто-то зайдет с большого экрана, у него твой сайт растянется на весь экран и я думаю, что дизайн будет ужасным. Если уже и используешь vw и vh стоит задать max-width для контейнера. А по-поводу картинок, посмотри версию браузера на планшете vw и vh не всеми поддерживается. А про медиа-запросы - просто гугли @media-queries в инете миллион больших статей с кучей примеров. 0

@koless 0 / 0 / 0 Регистрация: 25.01.2015 Сообщений: 5
	30.01.2015, 13:02 [ТС]	5
	Да мне то по сути и не нужны они Посмотрел примеры сейчас У меня отображение от малых 600х800 до full hd идеальное А вот с про смотром на мобильных устройствах какая то лажа Врет например в iwpro.ru у них выглядит замечательно все Нужно что бы div "slider" Принимал размер экрана на мобильных устройствах и уменьшал размер изображения как это происходит на любом разрешения заходя с любого разрешения но с компа А с планшета почему то принимается высота по размеру картинки а ширина по размеру экрана Картинка обрезается и получается белиберда 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	30.01.2015, 13:20	6
	Ну так ты задал vh=100% и vw=100% vw - viewport width, vh - viewport height. Ты блоку задаешь 100% от высоты экрана и 100% от ширины экрана. background-size:cover - масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. Вот и обрезается 0

@koless 0 / 0 / 0 Регистрация: 25.01.2015 Сообщений: 5
	30.01.2015, 13:22 [ТС]	7
	Да все верно Но при просмотре на планшете высота не равняется размеру экрана и не масштабируется почему?? 0

@Shakalaka 653 / 556 / 322 Регистрация: 27.01.2015 Сообщений: 1,374
	30.01.2015, 13:37	8
	Чувак, у меня на планшете вообще ничего не отображается(слайдер имею в виду). Более того, вообще нигде нет слайдера. Нажми ctr+f5 и у тебя не будет. У тебя в css ошибки.. Скачай web-developer для firefox, и смотри там указаны ошибки в css, там точек с запятой нет, и есть неправильно закрытые правила (нету скобок "}") правь css 0

@koless 0 / 0 / 0 Регистрация: 25.01.2015 Сообщений: 5
	30.01.2015, 13:45 [ТС]	9
	Я сейчас экспериментирую просто 0