Слайдер nivoSlider, так себе репрессивный слайдер, который в одно время просто стал расползаться, как пишет один пользователь, что нужна была адаптивность. Где он начал искать не так сильно сложное решение, главное, чтоб не было JavaScript. И здесь нашлось одно решение, которое полностью идет на чистых стилях, где даже не в курсе, как все называются, но вот главный плюс, это все корректно стало работать.
При разработке веб-сайта всегда полезно тестировать на как можно большем количестве различных платформ, устройств и браузеров. В наши дни превращение ваших сайтов в iPhone и iPad является важным шагом в процессе дизайна.
В частности, на iPad сайты выглядят примерно на 20% круче, чем в настольных браузерах, поэтому определенно стоит потратить время на точную настройку деталей. А при работе с iDevices часто необходимо предоставить какой-то собственный CSS, чтобы все было правильно.
Для iPad и других планшетов:
Код
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.nivoSlider {
position:relative;
max-width:745px; /* тут делаем новую ширину */
max-height:100%;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
}
Для iPhone и других смартфонов:
Код
@media only screen and (max-device-width: 480px) {
.nivoSlider {
position:relative;
max-width:450px; /* тут делаем новую ширину */
max-height:100%;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
}
Еще можно таким же образом подключать разные файлы со стилями:
Код
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iPhone.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="iPad.css" />
Как можно понять из материала, что такой конфуз может возникнуть в любой момент, и не только с нивослайдером, а с чем угодно и это решение должно помочь.
