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;
}

надеюсь, что это решит вашу проблему.