CSS Styling, который только стилирует все IPhones и IPADS
Проблема: у меня есть образ, который реагирует на всех платформах, кроме iphones.
В версии Android на сайте следующее изображение не искажается:
![введите описание изображения здесь]()
В версии iphone сайта, это раздувает изображение, и я не уверен.
Я думал, что следующее решение проблемы перекоса, которую он делает, кроме IPHONES и IPADS
#homepage .carousel .item {
height: auto !important;
}
#homepage .carousel .item img {
min-width: 100% !important;
max-width: 100% !important;
height: auto !important;
position: relative !important;
}
.carousel-indicators {
bottom: 2%;
}
Если сказать, что я также разместил остальную часть css, которую я сделал, чтобы сделать ее отзывчивой для разных размеров:
/***TEST 1.2***/
#homepage .carousel .item {
height: auto !important;
}
#homepage .carousel .item img {
min-width: 100% !important;
max-width: 100% !important;
height: auto !important;
position: relative !important;
}
.carousel-indicators {
bottom: 2%;
}
@media screen and (max-device-width: 375px) and (max-device-height: 667px) {
#homepage .carousel .item {
height: auto !important;
}
#homepage .carousel .item img {
min-width: 100% !important;
max-width: 100% !important;
height: auto !important;
position: relative !important;
}
.carousel-indicators {
bottom: 2%;
}
}
@media (max-width:331px){
.navbar-header{
margin-left:-20px;
}
.navbar-toggle{
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 0px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
}
@media screen and (max-width:331px) and (-webkit-min-device-pixel-ratio:0) {
#homepage .carousel .item img {
min-width: 100% !important;
width: 100% !important;
height: auto !important;
position: relative !important;
margin-top: 71px;
}
}
/*
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
#homepage .carousel .item {
height: 200px !important;
}
#homepage .carousel .item img {
min-width: 100% !important;
width: 100% !important;
height: 200px !important;
position: relative !important;
}
}*/
@media (min-width:729px) and (max-width:748px){
#homepage .carousel .item img {
min-width: 100% !important;
width: 100% !important;
height: auto !important;
position: relative !important;
margin-top: 71px;
}
}
@media(max-width: 728px) and (orientation:portrait){
#homepage .carousel .item img {
min-width: 100% !important;
width: 100% !important;
height: auto !important;
position: relative !important;
margin-top: 71px;
}
}
@media screen and (max-width: 728px) and (orientation:portrait) and (-moz-images-in-menus:0){
#homepage .carousel .item img {
min-width: 100% !important;
width: 100% !important;
height: auto !important;
position: relative !important;
margin-top: 0px;
}
}
/*Firefox*/
@media screen and (max-width: 748px) and (-moz-images-in-menus:0) {
#homepage .carousel .item img {
min-width: 100% !important;
width: 100% !important;
height: auto !important;
position: relative !important;
margin-top: 0px;
}
}
@media(max-width: 768px) and (orientation:landscape){
#homepage .carousel .item img {
min-width: 100% !important;
width: 100% !important;
height: auto !important;
position: relative !important;
margin-top: 71px;
}
}
@media screen and (max-width: 768px) and (orientation:landscape) and (-moz-images-in-menus:0){
#homepage .carousel .item img {
min-width: 100% !important;
width: 100% !important;
height: auto !important;
position: relative !important;
margin-top: 0px;
}
}
@media (max-width: 767px){
.image-margin-top2 {
margin-top: 182px !important;
}
.eventMargin {
margin-top: -85px;
}
}
@media (max-width:748px){
#homepage .carousel .item {
height: auto !important;
}
}
@media screen and (min-width: 766px) and (max-width:1024px){
.carousel-caption{
right:20%;
left:15%;
top:-4%;
}
.titleSlide, h1{
font-size: 33px !important;
}
.content1{
font-size:20px !important;
}
}
@media screen and (min-width: 766px) and (max-width:1024px) and (orientation:landscape){
.carousel-caption{
right:20%;
left:15%;
top:14%;
}
.titleSlide, h1{
font-size: 33px !important;
}
.content1{
font-size:20px !important;
}
}
@media screen and (min-width: 1025px) and (max-width:1280px){
.carousel-caption{
right:20%;
left:20%;
top:20%;
}
}
@media (min-width:749px) and (max-width:767px){
#homepage .carousel .item {
height: auto !important;
/*margin-top:71px;*/
}
}
@media screen and (min-width:768px) and (max-width:991px) and (-webkit-min-device-pixel-ratio:0) {
#homepage .carousel .item {
height: auto !important;
margin-top:154px;
}
}
@media (min-width:783px) and (max-width:991px){
.eventMargin{
margin-top:-200px;
}
.image-margin-top2 {
margin-top: 60px !important;
}
}
@media (max-width:767px){
.image-margin-top2 {
margin-top: 176px !important;
}
}
@media (min-width:768px) and (max-width:782px){
.image-margin-top2 {
margin-top: 62px !important;
}
.eventMargin{
margin-top: -200px;
}
}
@media (min-width:992px){
.image-margin-top2 {
margin-top: 57px !important;
}
}
@media (min-width:992px) and (max-width:1024px){
#homepage .carousel .item {
height: auto !important;
margin-top:20px;
}
}
Ответы
Ответ 1
У вас была правильная идея, вам просто нужно вставить тег ссылки в DOM.
function isAppleSafari(userAgent){
var iPhone = userAgent.match(/iPhone/i) !== null;
var Apple = userAgent.match(/Apple/i) !== null;
var Mac = userAgent.match(/Mac/i) !== null;
var iPod = userAgent.match(/iPod/i) !== null;
var iOS = userAgent.match(/iOS/i) !== null;
var Safari = userAgent.match(/Safari/i) !== null;
return Safari && (iPhone || Apple || Mac || iPod || iOS);
}
// Use like this...
if(isAppleSafari(navigator.userAgent)){
document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/Regal-en-us/includes/themes/MuraBootstrap3/assets/bootstrap/css/iphone.css">');
}
Я использовал insertAdjacentHTML здесь, чтобы поместить его в <head> страницы.
Ответ 2
Ваш код кажется прекрасным, кроме ratio.
Попробуйте удалить (-webkit-min-device-pixel-ratio: 2) и (-webkit-max-device-pixel-ratio:0). Если соотношение неверно, вы не можете увидеть эффект от вашего кода, поэтому попробуйте без него.
Ура!
Ответ 3
Одна вещь, которую я хотел бы предложить, - использовать vw и vh вместо 100%, поскольку эта мера имеет весь размер экрана, а не div или что-то еще родительский тег для него.
Подробнее об этом можно прочитать здесь:
http://www.w3schools.com/cssref/css_units.asp
Ответ 4
Посмотрел ваш сайт. Я думаю, вы должны сначала просмотреть свои ошибки JavaScript.
Попробуйте изменить meta viewport на:
<meta name="viewport" content="width=device-width, initial-scale=1">
Jquery не инициализируется правильно. Поэтому проверьте это.
В строке 860 вашего индекса добавьте косую черту перед завершением.
<link rel="stylesheet" href="..." />
а не
<link rel="stylesheet" href="..." >
Затем добавьте эту таблицу стилей на свой сервер. Это не там, и это называется iPhone или что-то в этом роде.
Когда эта таблица стилей срабатывает, она может решить ваши проблемы.
То же самое на линии 865. Он не находит вас bootstrap js.
Я могу сказать вам, что на рабочем столе сафари есть те же проблемы с изображением.
Сообщите мне, если что-то исправить.
Ответ 5
Я видел вашу проблему с iphone, и изображение все еще искажается,
поэтому я думаю, вы должны попытаться добавить эти строки в свой собственный CSS,
который поможет вам со всеми устройствами.
попробуйте добавить css, которые превышают высоту с помощью этого
.carousel-inner {
height: auto;
}
или
.carousel-inner > .item > img {
height: auto;
}
надеюсь, что это решит вашу проблему.
