仅仅为所有IPhones和IPADS设置样式的CSS样式

Question

问题：我的图像在除iphone之外的所有平台都有响应。

在网站的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，以使其针对不同尺寸做出响应：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我使用以下网站来定位IPhones和IPads，但它对iphone或ipads没有影响：http://stephen.io/mediaqueries/。图像继续倾斜。

有没有办法检测网站何时在iphone和ipad上显示。一旦检测到它，再调用另一个仅用于iphone和ipads的css文件？

我能够找到一行代码来检测它是否在iphone上，但不知道如何为iphone和ipads修改它。我做了以下但是它似乎没有检测到是否正在检测到iphone或ipad：

        <script language=javascript>
        if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
            <link rel="stylesheet" href="/Regal-en-us/includes/themes/MuraBootstrap3/assets/bootstrap/css/iphone.css">
        }
    </script>

任何帮助都将不胜感激。

谢谢

更新

我使用以下方法检测用户是使用ipad还是iphone：

    <script language=javascript>
    if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
        document.getElementsByTagName('head')[0].insertAdjacentHTML('beforeend', '<link rel="stylesheet" href="/includes/themes/MuraBootstrap3/assets/bootstrap/css/iphone.css">');
        alert("Hello1.1!");
    }
</script>

它检测到iphone和ipad。但是，我正在做的样式没有被检测到。以下是我用于iphone和ipad设计轮廓图像的样式：

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

/* Portrait and Landscape iphone and ipad*/
/*@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 760px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
    #homepage .carousel .item { 
        height: 139px !important; 
        margin-top:285px !important;
    }
}*/
@media screen and (max-width:768px) and (orientation:portrait) and (-webkit-max-device-pixel-ratio:0) { 
    #homepage .carousel .item img {
        /*min-width: 100% !important;
        /*width: 100% !important;*/
        height: 293px !important;*/
        position: relative !important;
        margin-top: 200px;
    }
}

正如您所看到的，它不会检测到媒体查询，但它正被IPAD和IPHONE识别，因为警报已关闭。

任何帮助都将不胜感激。

更新：

此时，我想在iphone和ipad上看起来很漂亮。我已经做了一段时间没有解决方案或取得进展

Answer 1

你有正确的想法，你只需要将链接标记插入DOM。

<head>

我在这里使用insertAdjacentHTML将其放入页面的{{1}}。

Answer 2

除了ratio之外，你的代码似乎都很好。 请尝试删除(-webkit-min-device-pixel-ratio: 2)和(-webkit-max-device-pixel-ratio:0)。如果比率不正确，则无法查看代码的效果，请尝试不使用它。

干杯！

Answer 3

我建议的一件事是使用vw和vh而不是100％，因为这样可以调整屏幕的整个大小而不是div或者是它的父标记。

您可以在此处详细了解： http://www.w3schools.com/cssref/css_units.asp

Answer 4

看看你的网站。我想你必须先看看你的javascript错误。

尝试将元视口更改为：

    <meta name="viewport" content="width=device-width, initial-scale=1">

Jquery没有正确初始化。所以检查一下。

在索引的第860行，在结束前添加斜杠。

    <link rel="stylesheet" href="..." />

而不是

    <link rel="stylesheet" href="..." >

将该样式表添加到您的服务器。它不在那里，它被称为iPhone或其他东西。 当这个样式表开始时，它可能会解决你的麻烦。 在865行也是如此。它找不到你的引导程序。

我可以告诉你，在safari桌面上你会遇到与图像相同的麻烦。

如果能解决问题，请告诉我。

Answer 5

我用iphone看到你的问题而且图像仍在倾斜， 所以我认为你应该尝试将这些行添加到你的自定义CSS中， 这将有助于您使用所有设备。

尝试使用此

添加超出高度的css

.carousel-inner {
height: auto;
}

或

.carousel-inner > .item > img {
height: auto;
}

希望它能解决你的问题。